`

HTML编辑器FCKeditor使用详解

阅读更多
http://www.blogjava.net/fastunit/archive/2008/02/18/180525.html   HTML编辑器FCKeditor使用详解  
FCKeditor 2.5.1(FCKeditor_2.5.1.zip)和FCKeditor.Java(FCKeditor-2.3.zip)

http://liangzhijian.iteye.com/blog/204331    SSH集成Fckeditor   
FCKeditor_2.5.1.zip  FCKeditor-2.3.zip

http://gemini.iteye.com/blog/135478  在Java Web应用中使用FCKeditor         
FCKeditor2.4.3   FCKeditor.Java 2.3

http://www.blogjava.net/vjame/archive/2008/09/05/227257.html  Java Web项目中整合FCKeditor  
FCKeditor 2.6.3

---------------------------------------------------------------->
----将FCKeditor加到项目中
把FCKeditor解压后的整个目录复制到项目的WebRoot下。
如果想去掉在Java中使用不需要的文件,在根目录下只保留editor目录,以及fckconfig.js、ditor.js、fckstyles.xml、fcktemplates.xml。
删除目录/editor/_source,删除/editor/filemanager/browser/default/connectors下的所有文件,删除/editor/filemanager/upload下的所有文件。

----将FCKeditor.Java加到项目中
将FCKeditor.Java解压,把其中/web/WEB-INF/lib下的commons-fileupload.jar和FCKeditor-2.3.jar复制到项目的/WEB-INF/lib下。
把src目录下的FCKeditor.tld复制到项目的WEB-INF下。

-----配置web.xml
将FCKeditor.Java解压包中/web/WEB-INF下web.xml里的内容复制到项目的web.xml里,如下:
web.xml
<!-- 这个Servlet用来浏览服务器下的某个目录,可查看该目录下的文件,创建新目录,创建新文件 -->     
<servlet>  
    <servlet-name>Connector</servlet-name>  
    <servlet-class>com.fredck.FCKeditor.connector.ConnectorServlet</servlet-class>  
    <init-param>  
        <!-- 要浏览的服务器下的目录 -->  
        <param-name>baseDir</param-name>  
        <param-value>/UserFiles/</param-value>  
    </init-param>  
    <init-param>  
        <param-name>debug</param-name>  
        <param-value>true</param-value>  
    </init-param>  
    <load-on-startup>1</load-on-startup>  
</servlet>  
  
<!-- 这个Servlet用来上传文件 -->  
<servlet>  
    <servlet-name>SimpleUploader</servlet-name>  
    <servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServlet</servlet-class>  
    <init-param>  
        <!-- 文件上传到服务器的目录 -->  
        <param-name>baseDir</param-name>  
        <param-value>/UserFiles/</param-value>  
    </init-param>  
    <init-param>  
        <param-name>debug</param-name>  
        <param-value>true</param-value>  
    </init-param>  
    <init-param>  
        <!-- 此参数为是否开启上传功能 -->  
        <param-name>enabled</param-name>  
        <param-value>true</param-value>  
    </init-param>  
    <init-param>  
        <param-name>AllowedExtensionsFile</param-name>  
        <param-value></param-value>  
    </init-param>  
    <init-param>  
        <param-name>DeniedExtensionsFile</param-name>  
        <param-value>  
            php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgi   
        </param-value>  
    </init-param>  
    <init-param>  
        <param-name>AllowedExtensionsImage</param-name>  
        <param-value>jpg|gif|jpeg|png|bmp</param-value>  
    </init-param>  
    <init-param>  
        <param-name>DeniedExtensionsImage</param-name>  
        <param-value></param-value>  
    </init-param>  
    <init-param>  
        <param-name>AllowedExtensionsFlash</param-name>  
        <param-value>swf|fla</param-value>  
    </init-param>  
    <init-param>  
        <param-name>DeniedExtensionsFlash</param-name>  
        <param-value></param-value>  
    </init-param>  
    <load-on-startup>1</load-on-startup>  
</servlet>  
  
<servlet-mapping>  
    <servlet-name>Connector</servlet-name>  
    <!-- 此处假定FCKeditor解压包里的editor目录是直接放在WebRoot下的 -->  
    <!-- 根据项目中FCKeditor放置的位置,此路径应做相应的修改 -->  
    <url-pattern>  
        /editor/filemanager/browser/default/connectors/jsp/connector   
    </url-pattern>  
</servlet-mapping>  
  
<servlet-mapping>  
    <servlet-name>SimpleUploader</servlet-name>  
    <url-pattern>  
        /editor/filemanager/upload/simpleuploader   
    </url-pattern>  
</servlet-mapping>  

----在页面中加入FCKeditor
input.jsp
<%@ page contentType="text/html; charset=GBK" language="java"%>  
<%@ taglib uri="/WEB-INF/FCKeditor.tld" prefix="fck"%>  
  
<html>  
  <body>  
    <form action="display.jsp" method="post">  
      <!-- 下面的id属性对应于一般Form元素的name属性 -->  
      <fck:editor id="testfck"  
                  basePath="/fckeditortest/"  
                  height="60%"  
                  skinPath="/fckeditortest/editor/skins/default/"  
                  toolbarSet="Default"  
                  imageBrowserURL="/fckeditortest/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"  
                  linkBrowserURL="/fckeditortest/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"  
                  flashBrowserURL="/fckeditortest/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"  
                  imageUploadURL="/fckeditortest/editor/filemanager/upload/simpleuploader?Type=Image"  
                  linkUploadURL="/fckeditortest/editor/filemanager/upload/simpleuploader?Type=File"  
                  flashUploadURL="/fckeditortest/editor/filemanager/upload/simpleuploader?Type=Flash">  
      <!-- 上面的URL要根据FCKeditor放置在项目中的位置做相应的修改 -->  
      <!-- 此处假定将FCKeditor解压包中的editor目录直接放在项目的WebRoot下,fckeditortest是项目名 -->  
      </fck:editor>  
      <hr>  
      <input type="submit" value="提交">  
    </form>  
  </body>  
</html>  

<-----------------------------------------------------------------||
上面是通过FCKeditor.Java的自定义标签来实现的,还可以使用JavaScript方法来实现。
display.jsp
<%=request.getParameter("testfck")%>  
----定制FCKeditor
在FCKeditor解压包里的fckconfig.js文件,设置了FCKeditor的一些属性。可以直接修改它来定制FCKeditor,也可以通过在页面里设置FCKeditor.Java自定义标签的属性或JavaScript对象的属性来覆盖fckconfig.js中的值。
-------------------------------------------------------------------
FCKeditor参数说明

五、配置文件fckconfig.js

1、DefaultLanguage:缺省语言,可更改为“zh-cn”

2、自定义工具栏:可修改或增加ToolbarSets,例如:

FCKConfig.ToolbarSets["Mycfg"] = [
   [定义想要使用的工具栏选项]
] ;

然后在fckeditor.js中修改此行:
this.ToolbarSet = toolbarSet || 'Mycfg' ;   //‘Mycfg’就是你自己定义的工具栏

修改后会发现浏览器执行时,找不到工具栏,不要慌,清掉浏览器缓存就可以了。
3、EnterMode和ShiftEnterMode:“回车”和“Shift+回车”的换行行为,注释提示了可选模式

4、EditorAreaCss:编辑区样式文件

5、其他参数(转):

AutoDetectLanguage=true/false   自动检测语言
BaseHref=""   相对链接的基地址
ContentLangDirection="ltr/rtl"   默认文字方向
ContextMenu=字符串数组,右键菜单的内容
CustomConfigurationsPath=""   自定义配置文件路径和名称
Debug=true/false   是否开启调试功能,这样,当调用FCKDebug.Output()时,会在调试窗中输出内容
EnableSourceXHTML=true/false   为TRUE时,当由可视化界面切换到代码页时,把HTML处理成XHTML
EnableXHTML=true/false   是否允许使用XHTML取代HTML
FillEmptyBlocks=true/false   使用这个功能,可以将空的块级元素用空格来替代
FontColors=""   设置显示颜色拾取器时文字颜色列表
FontFormats=""   设置显示在文字格式列表中的命名
FontNames=""   字体列表中的字体名
FontSizes=""   字体大小中的字号列表
ForcePasteAsPlainText=true/false   强制粘贴为纯文本
ForceSimpleAmpersand=true/false   是否不把&符号转换为XML实体
FormatIndentator=""   当在源码格式下缩进代码使用的字符
FormatOutput=true/false   当输出内容时是否自动格式化代码
FormatSource=true/false   在切换到代码视图时是否自动格式化代码
FullPage=true/false   是否允许编辑整个HTML文件,还是仅允许编辑BODY间的内容
GeckoUseSPAN=true/false   是否允许SPAN标记代替B,I,U标记
IeSpellDownloadUrl=""下载拼写检查器的网址
ImageBrowser=true/false   是否允许浏览服务器功能
ImageBrowserURL=""   浏览服务器时运行的URL
ImageBrowserWindowHeight=""   图像浏览器窗口高度
ImageBrowserWindowWidth=""   图像浏览器窗口宽度
LinkBrowser=true/false   是否允许在插入链接时浏览服务器
LinkBrowserURL=""   插入链接时浏览服务器的URL
LinkBrowserWindowHeight=""链接目标浏览器窗口高度
LinkBrowserWindowWidth=""链接目标浏览器窗口宽度
Plugins=object   注册插件
PluginsPath=""   插件文件夹
ShowBorders=true/false   合并边框
SkinPath=""   皮肤文件夹位置
SmileyColumns=12   图符窗列数
SmileyImages=字符数组   图符窗中图片文件名数组
SmileyPath=""   图符文件夹路径
SmileyWindowHeight   图符窗口高度
SmileyWindowWidth   图符窗口宽度
SpellChecker="ieSpell/Spellerpages"   设置拼写检查器
StartupFocus=true/false   开启时FOCUS到编辑器
StylesXmlPath=""   设置定义CSS样式列表的XML文件的位置
TabSpaces=4   TAB键产生的空格字符数
ToolBarCanCollapse=true/false   是否允许展开/折叠工具栏
ToolbarSets=object   允许使用TOOLBAR集合
ToolbarStartExpanded=true/false   开启是TOOLBAR是否展开
UseBROnCarriageReturn=true/false   当回车时是产生BR标记还是P或者DIV标记
六、自定义样式

工具栏的Style选项,是由fckconfig.js指定的配置文件来产生的:

FCKConfig.StylesXmlPath  = FCKConfig.EditorPath + 'fckstyles.xml' ;
可修改fckstyles.xml来自定义样式。



分享到:
评论

相关推荐

    文本编辑器FCKEditor使用详解

    FCKeditor 是一款流行的开源文本编辑器,主要用于Web开发,它提供了所见即所得(WYSIWYG)的编辑体验,使得用户在网页上编辑内容时就像使用桌面文字处理软件一样方便。这款编辑器支持插入图片、Flash动画等多媒体...

    asp.net文本编辑器FCKeditor使用方法详解

    ASP.NET 文本编辑器 FCKeditor 使用方法详解 FCKeditor 是一个功能强大且流行的 ASP.NET 文本编辑器,提供了许多实用的功能,如格式化文本、插入图片、上传文件、创建表格等。下面将详细介绍如何使用 FCKeditor 在 ...

    文本编辑器FCKeditor使用方法详解--图文详解

    【FCKeditor使用方法详解】 FCKeditor是一款强大的开源文本编辑器,主要用于在网页中创建和编辑富文本内容。它的功能强大,支持多种语言,并且提供了丰富的API供开发者进行自定义扩展。以下是对FCKeditor使用方法的...

    asp.net文本编辑器FCKeditor使用方法详解.doc

    ASP.NET中的FCKeditor是一款强大的富文本编辑器,它允许用户在网页上创建和编辑复杂的HTML内容,类似于桌面的文字处理软件。以下是对FCKeditor在ASP.NET中使用方法的详细说明: 1. 获取FCKeditor资源:首先,你需要...

    FCKeditor使用详解.doc

    FCKeditor 使用详解 FCKeditor 是一个功能强大、支持所见即所得功能的文本编辑器,可以为用户提供微软 Office 软件一样的在线文档编辑服务。它不需要安装任何形式的客户端,兼容绝大多数主流浏览器,支持 ASP.Net、...

    FCKeditor使用方法详解

    FCKeditor 是一个基于JavaScript的开源富文本编辑器,它在Web开发领域中被广泛使用,尤其适用于那些需要提供用户友好、可视化的文本编辑功能的网站。FCKeditor 具备强大的功能,包括字体样式调整、图像处理、链接...

    Fck文本编辑器 FCKeditor fckeditor

    **FCK文本编辑器——FCKeditor与fckeditor详解** FCK文本编辑器,全称为FCKeditor,是一个开源的富文本编辑器,主要用于网页内容的编辑和格式化。FCKeditor以其强大的功能和易用性,被广泛应用于网站后台管理系统、...

    FCKEditor使用详解_2003.doc

    FCKEditor 是一款流行的开源HTML编辑器,提供所见即所得的编辑体验,广泛应用于Web应用程序中,允许用户在浏览器端创建和编辑富文本内容。这款编辑器支持多种功能,包括插入图片、Flash动画,以及自定义工具栏布局。...

    fckeditor文本编辑器详解.rar

    这个压缩包“fckeditor文本编辑器详解.rar”包含了关于该编辑器的详细资料,包括其工作原理、使用方法和一些常见的开发问题。 1. **基本介绍** fckeditor是一个JavaScript组件,它通过AJAX技术与服务器进行交互,...

    网页编辑器FCKeditor.jar 及使用方法

    **FCKeditor.jar 网页编辑器详解与使用指南** **一、FCKeditor简介** FCKeditor是一款开源的富文本编辑器,它允许用户在网页上进行类似Word的文本编辑操作,包括插入文本、图像、链接、表格、列表等。这个编辑器以...

    FCKeditor编辑器源码示例及详解

    2. **事件处理**:FCKeditor使用JavaScript事件驱动,开发者可以通过监听和处理编辑器的事件来实现特定的功能。 3. **插件系统**:FCKeditor支持扩展,通过编写插件可以添加自定义功能,如插入特殊字符、图表等。 4....

    fckeditor文档编辑器插件

    **fckeditor文档编辑器插件详解** 在网页开发过程中,为了提供用户友好的内容编辑体验,开发者常常会使用文档编辑器插件。fckeditor就是这样一款强大的Web页面编辑工具,它为用户提供了类似Microsoft Word的界面,...

    FCKeditor使用方法详解.doc

    ### FCKeditor使用方法详解 #### 一、引言 FCKeditor,一款基于JavaScript的网页编辑器,因其强大的功能、易配置性、跨浏览器兼容性以及对多种编程语言的支持而备受推崇。作为一款开源软件,FCKeditor不仅在国际上...

Global site tag (gtag.js) - Google Analytics