当前位置: 代码迷 >> Web前端 >> fckeditor 相关有关问题
  详细解决方案

fckeditor 相关有关问题

热度:211   发布时间:2012-10-26 10:30:59.0
fckeditor 相关问题
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来自定义样式。
  相关解决方案