FCKeditor是sourceforge.net上面的一个开源项目,主要是实现在线网页编辑器的功能,可以让web程序拥有如MS Word这样强大的编辑功能。官方网站为http://www.fckeditor.net ,在服务器端支持ASP.Net、ASP、ClodFusion、PHP、Java等语言,并且支持IE 5+、Mozilla 、Netscape等主流浏览器。
首先在官方网站下载fckeditor,注意有两个包,一个是主文件,一个是jsp整合包的。
1、解压FCKeditor_2.3.2.zip,(FCKeditor主文件),将FCKeditor目录复制到网站根目录下
(这里要注意,解压开的是fckeditor要改成FCKeditor (用标签调用时默认是大写的,用js时却是小写的,这个不太明白)
2、解压FCKeditor-2.3.zip,(jsp,FCKeditor整合包),作用:This is the JSP Integration Pack for using FCKeditor inside a java server page without the complexity of using a Java scriptlets or the javascript api.
3、将FCKeditor-2.3/web/WEB-INF/web.xml中的两个servlet,servlet-mapping定义复制到自已项目的web.xml文件中
修改
<servlet-mapping>
<servlet-name>Connector</servlet-name>
<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>
为
<servlet-mapping>
<servlet-name>Connector</servlet-name>
<url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connector</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>SimpleUploader</servlet-name>
<url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploader</url-pattern>
</servlet-mapping>
4、将FCKeditor-2.3/web/WEB-INF/lib目录下2个JAR包:FCKeditor-2.3.jar,commons-fileupload.jar复制到自已项目的lib文件夹中(注意如果用SSH 用了SPRING的上传项目里有commons-fileupload.jar)就不用复制了.
(这里要注意,有的网上的帖子里写的是把jsp整合包里的源代码src\com\fredck\FCKeditor\*整合到了项目里,那么这个时候就不需要FCKeditor-2.3.jar了,可以看看这是一个东西。)
5、在需使用FCKeditor的jsp界面中加入:
// 文件开头处加入
<%@ taglib uri="http://fckeditor.net/tags-fckeditor" prefix="FCK" %>
这种用法没注意过 我用的是<%@ taglib uri="/WEB-INF/FCKeditor.tld" prefix="FCK" %>
/WEB-INF/FCKeditor.tld这个文件当然是要有的。
//要使用的地方加入
<FCK:editor id="content" width="100%" height="500 basePath="/FCKeditor/"
imageBrowserURL="/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"
linkBrowserURL="/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"
flashBrowserURL="/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"
imageUploadURL="/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"
linkUploadURL="/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"
flashUploadURL="/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">
这里是要编辑的内容,可以直接接受显示输出的参数(如 <%=content %>)。
</FCK:editor>
//////////////////////////////////////////
使用时有可能出现FCKeditor不能浏览服务器问题,报错信息为: The Server didn 't send back a proper XML response。
原因是服务器没有xml解析器,
解决方法:到 http://apache.justdn.org/xml/xalan-j/binaries/
下载 xalan-j_2_7_0-bin-2jars.zip
解压后把 xalan.jar,serializer.jar拷贝到应用的lib目录下。就OK了。
我用的是tomcat 6.0 没有报这个错误,可能是里面有自带的
//////////////////////////////
启动服务器测试。。。。成功后,来给FCKeditor瘦瘦身.
1、将FCKeditor目录下及子目录下所有以”_”下划线开头的文件夹删除
2.FCKeditor根目录下只保留fckconfig.js, fckeditor.js, fckstyles.xml, fcktemplates.xml其余全部删除
3.将editor/filemanager/upload目录下文件及文件夹清空.
4.还可以将editor/skins目录下的皮肤文件删除,只留下default一套皮肤(如果你不需要换皮肤的话)
5.还可以将editor/lang目录下文件删除,只保留en.js, fcklanguagemanager.js, zh-cn.js, zh.js文件(英文,简体中文,繁体中文一般应该够用了:) )
完成,现在看是不是清爽了很多?
其它问题:
在struts+spring+hibernate中使用,上传图像功能中可能会出现报:
The output format must have a ‘{http://xml.apache.org/xalan}content-handler’ property!
错的情况,将WEB-INF/lib目录下xalan*.jar删除试试
安全问题:
假如在前台让普通用户也能使用FCKEditor,要注意相关安全问题,在前台使用时,不要使用默认的ToolBar,
要将添加图像,flash,图像域按钮去掉
在fckconfig.js中大约78行配置 那些数组中的值就像当于界面上的一个功能,你可以强行把每组值试出来代表什么。:P
到此安装FCKeditor就完成了,相关详细配置你可以看FCKeditor-2.3.zip,(jsp,FCKeditor整合包)文件夹中web/_samples目录下的例子。
///////////////////////////////////////
三种方法调用FCKeditor
<%--
三种方法调用FCKeditor
1.FCKeditor自定义标签 (必须加头文件 <%@ taglib uri="/TestFCKeditor" prefix="FCK" %> )
2.script脚本语言调用 (必须引用 脚本文件 <script type="text/javascript" src="/TestFCKeditor/FCKeditor/fckeditor.js"></script> )
3.FCKeditor API 调用 (必须加头文件 <%@ page language="java" import="com.fredck.FCKeditor.*" %> )
--%>
这个现在不太清楚也没研究,平时就用过标签的就是第一种。
11.FCKeditor编辑器文件上传配置
FCKeditor编辑器的配置文件是fckconfig.js,其中有对编辑器各种默认属性的设置。以下是fckeditor与java集成使用时上传文件的设置(需要注意的是编辑器不会自动创建文件上传的文件夹,需要在项目的根目录中手动添加),将fckeditor.js文件中以下几个属性原来的值修改为如下设置:
FCKConfig.LinkBrowserURL = FCKConfig.BasePath + "filemanager/browser/default/browser.html?Connector=connectors/jsp/connector" ;FCKConfig.ImageBrowserURL = FCKConfig.BasePath + "filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector" ;FCKConfig.FlashBrowserURL =FCKConfig.BasePath + "filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector" ; FCKConfig.LinkUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=File' ;FCKConfig.ImageUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=Image' ;FCKConfig.FlashUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=Flash' ;至此,即可使用FCKeditor的文件上传功能。
//////////////////////
五、配置文件fckconfig.js
1、DefaultLanguage:缺省语言,可更改为“zh-cn”
2、自定义工具栏:可修改或增加ToolbarSets,例如:
FCKConfig.ToolbarSets["Demo"] = [
['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink','-','TextColor','BGColor','-','Style','-','Image','Flash','Table']
] ;
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来自定义样式。
分享到:
相关推荐
FCKeditorDemo,教你如何使用FCKeditor的相关资料,以及调试方法和配色方案。
告诉FileUpload组件处理时的编码为项目编码,在FileItem中,用getString(encoding),这项设置可以解决获取的表单字段为乱码的问题,所以在每个FileItem实例后面都执行一次getString(encoding),就告诉FileItem在取值...
与编辑器相关的所有图像,脚本以及调用页 .语言文件 .编辑器的皮肤文件 .工具样的贴图等 _samples中为示例文件同时,FCKeditor支持以下编程语言环境: ASP.Net\ASP\ColdFusion\...
FCKeditor相关资料简介: (要下载FCKeditor2.6.zip和FCKeditor.NET2.5版的2个zip包) FCKeditor2.6zip是其最新的Javascript文件和图片等; FCKeditor.NET.zip是一个ASP.NET控件DLL文件。 下面结合一个ASP.NET...
w网页编辑的一款非常有用的开源jar包,希望对大家有用。
首先去下载FCKEditor2.6.3(当然本文编写的时候,这个是最新版本,也许你现在看到的已经是更新的版本了,... 第二是FCKeditor.Java(fckeditor-java-2.4.1-bin.zip),就是在Java代码中使用FCKEditor的相关工具类;
FCKeditor的相关资源fckeditor-java-2.6-bin,fckeditor-java-2.6-src,fckeditor-2.6.6
资源包括FCKeditor_2.5.1.zip、 FCKeditor_2.3.zip、 FCKeditor工程配置文档和使用相关信息、 完整的FCK工程示例
修改文件径fckeditor--ditor--dialog--fck_image中的fck_image.js、fckconfig.js等等花时间琢磨一下. 其中还有我自己改写的公共类,带"image"标识的文件,希望大家都详细看看,改过的地方很多,就不例举了。希望大家...
内附FCKEditor源代码,及其应用于Java Web程序相关包,并包含使用示例
这三个变量是设置你允许上传的文件类型,和已上传文件管理功能也密切相关的哈~ 2.设置好上面的文件以及fck的基本设置之后,请首先运行editor/filemanager/connectors/php目录下的create_db_table.php文件,确保...
带有相关jar包的文本编辑器
里面有最新的FCKEditor配置文件及相关配置方法,还有图片的具体配置
FCKeditor是款强大的在线编辑工具,网站后台怎么少了它!...可上传多种格式视频并播放,当然前提是机子上有相关的解码器,可创建中文文件夹,上传文件自动按时间命名,永不会重复,中文文件同样可以上传。 图片预览: ...
FCKeditor是目前最优秀的可见即可得网页编辑器之一,它采用JavaScript编写。具备功能强大、配置...它非常流行,互联网上很容易找到相关技术文档,国内许多WEB项目和大型网站均采用了FCKeditor(如百度,阿里巴巴)。
FCKeditor 是目前最优秀的可见即可得网页编辑器之一,它采用JavaScript编写。...它非常流行,互联网上很容易找到相关技术文档,国内许多WEB项目和大型网站均采用了FCKeditor(如百度,阿里巴巴)。
它非常流行,互联网上很容易找到相关技术文档,国内许多WEB项目和大型网站均采用了FCKeditor。 FCKeditor是一个专门使用在网页上属于开放源代码的所见即所得文字编辑器。它志于轻量化,不需要太复杂的安装步骤即可...
删除spell check 相关的两处地方 修改如下 url, 使用 fckeditor servelt 来做文件上传与目录浏览: FCKConfig.LinkBrowserURL = FCKConfig.BasePath " filemanager/browser/default/browser....
fckeditor相关资料:包括要引用的文件、jar、web.xml、Servlet.java等资源。最主要的还包括其怎么使用都有说明文档。
fckeditor开发需要的各种文件,包括jar包,源代码等等