Fckeditor学习研究整理笔记
Fckeditor学习笔记
配置fckeditor工程
1、新建web project
2、引入以下5个jar包，可以见工程中的reference library
3、js的使用可参见test1.html和test2.html，刚好对应官方文档中的以下两种方法
（http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide/Integration/JavaScript）
Step 1
The first thing to do is to include the "JavaScript Integration Module" scripts inside the <HEAD> of your page, just like this:
<script type="text/javascript"src="fckeditor/fckeditor.js"></script>
Step 2
Now the FCKeditor class is available and ready to use. There are three ways to create an FCKeditor in your page:
Method 1
The inline method (preferred): Go to the body of your page, to the place you want the editor to be (usually inside a form) and place the following
script there:
<script type="text/javascript">
var oFCKeditor = new FCKeditor('FCKeditor1');
oFCKeditor.BasePath = "/fckeditor/";
oFCKeditor.Create();
</script>
Method 2
The TEXTAREA replacement method:
In <HEAD> add the "onload" method:
<script type="text/javascript">
window.onload = function()
{
var oFCKeditor = new FCKeditor( 'MyTextarea' ) ;
oFCKeditor.BasePath = "/fckeditor/" ;
oFCKeditor.ReplaceTextarea() ;
}
</script>
In <BODY> add the below code to replace an existing TEXTAREA in the page:
<textarea id="MyTextarea" name="MyTextarea">This is <b>the</b> initial value.</textarea>
4、jsp的使用可参见editor.jsp
需要在jsp页面中加
<%@ taglib uri="http://java.fckeditor.net" prefix="FCK"%> <body> <FCK:editor instanceName="myEditor" basePath="/fckeditor" value= "this is comment"> </FCK:editor> </body>
注意，官方文档上还要求修改server.xml,增加以下内容
<servlet>
<servlet-name>Connector</servlet-name>
<servlet-class>
net.fckeditor.connector.ConnectorServlet
</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Connector</servlet-name>
<url-pattern>
/fckeditor/editor/filemanager/connectors/*
</url-pattern>
</servlet-mapping>
创建一个文件 fckeditor.properties，in your classpath （即src下）文件内容如下:
connector.userActionImpl=net.fckeditor.requestcycle.impl.UserActionImpl
一、修改配置的三中方法
方法1、直接修改配置文件fckconfig.js
方法2、定义单独的配置文件（只需要写需要修改的配置项）
方法3、在页面的调用代码中对fckeditor的实例进行配置
二、配置加载顺序
1、先加载主配置文件fckconfig.js
2、加载自定义文件配置会覆盖相同的配置项
3、使用对实例的配置会覆盖相同的配置项（只对当前的实例有效）
三、注意
1、系统会自动侦测并运用适当的语言界面（默认，可以修改）
2、不能删除主配置文件fckconfig.js
3、修改配置后要清空浏览器缓存，以免影响结果（或访问时强制刷新也可以IE中是Ctrl+F5）
四、修改配置信息--工具集配置(方法2、定义单独的配置文件,只需要写需要修改的配置项)
1）、文档中对应配置集的选项网页为http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide/Configuration/Configuration_Options/ToolbarSets
2）、先拷贝ToolbarSets["Default"]功能，为下面修改做好准备
FCKConfig.ToolbarSets["Default"] = [ ['Source','DocProps','-','Save','NewPage','Preview','-','Templates'], ['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'], ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'], ['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'], '/', ['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'], ['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote'], ['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'], ['Link','Unlink','Anchor'], ['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'], '/', ['Style','FontFormat','FontName','FontSize'], ['TextColor','BGColor'], ['FitWindow','ShowBlocks','-','About'] // No comma for the last row. ] ;
3）、在拷贝的基础上修改自定义工具集
FCKConfig.ToolbarSets["itcastbbs"] = [ ['Source','DocProps'], ['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'], ['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote'], ['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'], ['Link','Unlink','Anchor'], ['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'], '/', ['Style','FontFormat','FontName','FontSize'], ['TextColor','BGColor'], ['FitWindow','ShowBlocks','-','About'] // No comma for the last row. ] ;
4）在创建myconfig.js，将该自定义工具集放入myconfig.js
5）在fckconfig.js页面中申明以上自定义myconfig.js如下//此处用的是绝对路径，下文还使用了相对路径，发布时建意用相对路径。
FCKConfig.CustomConfigurationsPath ='/test/myconfig.js';
在test2.jsp测试页面中申明如下：
oFCKeditor.ToolbarSet="itcastbbs";
5)、此时刷新原来的test2.html便可以看到自定义的工具集了。
五、修改配置信息--字体的配置
A、原字体的配置在fckconfig中为
FCKConfig.FontNames = 'Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;
B、拷贝上面的
FCKConfig.FontNames= 'Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;到myconfig.js文件
C、修改为
FCKConfig.FontNames='宋体;楷体_GB2312;黑体;隶书;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;
六、修改回车和shift+回车行为
A、原回车和shift+回车行为的配置在fckconfig中为 FCKConfig.EnterMode = 'p' ; // p | div | br
FCKConfig.ShiftEnterMode = 'br' ; // p | div | br
B、拷贝上面的到myconfig.js文件
C、修改为FCKConfig.EnterMode = 'br' ; // p | div | br
FCKConfig.ShiftEnterMode = 'p' ; // p | div | br
七、修改编辑区样式文件
A、原编辑区样式文件在fckconfig中为 FCKConfig.EditorAreaCSS = FCKConfig.BasePath + 'css/fck_editorarea.css' ;
注意，这个属性FCKConfig.BasePath和test2.html页面中oFCKeditor.BasePath = "/test/fckeditor/" ;的BasePath不是同一个概念。
B、FCKConfig.BasePath代表了样式文件所在的文件夹，本例中在fckeditor/editor文件夹下
C、开发时可以把自己的样式加在fck_editorarea.css文件中。
八、配置表情图片
A、原配置表情图片在fckconfig中为
FCKConfig.SmileyPath = FCKConfig.BasePath + 'images/smiley/msn/' ;
FCKConfig.SmileyImages =
['regular_smile.gif','sad_smile.gif','wink_smile.gif','teeth_smile.gif','confused_smile.gif','tounge_smile.gif','embaressed_smile.gif','omg_smile.
gif','whatchutalkingabout_smile.gif','angry_smile.gif','angel_smile.gif','shades_smile.gif','devil_smile.gif','cry_smile.gif','lightbulb.gif','thu
mbs_down.gif','thumbs_up.gif','heart.gif','broken_heart.gif','kiss.gif','envelope.gif'] ;
FCKConfig.SmileyColumns = 8 ;
FCKConfig.SmileyWindowWidth = 320 ;
FCKConfig.SmileyWindowHeight = 210 ;
说明：上面FCKConfig.SmileyPath指表情图片所在的文件夹
FCKConfig.SmileyImages配置文件夹中那些图片将会被用到
FCKConfig.SmileyColumns每行显示几个
FCKConfig.SmileyWindowWidth表情图片的宽度
FCKConfig.SmileyWindowHeight表情图片的高度
注意：
1、要使用UTF-8编码保存配置文件
2、注意，这个属性FCKConfig.BasePath和test2.html页面中oFCKeditor.BasePath = "/test/fckeditor/" ;的BasePath不是同一个概念。
3、发布时不能再使用绝对路径
如原先myconfig.js是放在webroot下的，使用的是FCKConfig.CustomConfigurationsPath ='/test/myconfig.js'; 配置
现在需要把myconfig.js文件移到fckeditor文件夹下，并且用相对路径配置如下FCKConfig.CustomConfigurationsPath =FCKConfig.EditorPath+"myconfig.js";
九、配置文件上传及中文乱码问题
1、准备工作
A、 Declare the ConnectorServlet in your web.xml
<servlet>
<servlet-name>Connector</servlet-name>
<servlet-class>
net.fckeditor.connector.ConnectorServlet
</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Connector</servlet-name>
<url-pattern>
/fckeditor/editor/filemanager/connectors/*
</url-pattern>
</servlet-mapping>
</web-app>Assuming you installed the editor in the /fckeditor folder in your webapp.
The Connector is now declared but still disabled. The response is going to be an error message.
B、创建一个文件 fckeditor.properties，in your classpath （即src下）文件内容如下:
connector.userActionImpl=net.fckeditor.requestcycle.impl.UserActionImpl
2、文件中文名乱码问题
是在服务器端上传时出现的乱码。
解决方法
1）、在我的test项目中ConnectorServlet.java类，类的内容与net.fckeditor.connector.ConnectorServlet.java内容一致
2)、然后修改该类，在该类的doPost()方法中try {
List<FileItem> items = upload.parseRequest(request);
语句前加上如下语句：
upload.setHeaderEncoding("UTF-8");
这样就不会出现乱码了
3）、在上述A步骤中servlet配置中需要修改以下内容：
将原来的 <servlet-class>
net.fckeditor.connector.ConnectorServlet
</servlet-class>
修改为
<servlet-class>
com.symbio.hz.fckeditor.ConnectorServlet
</servlet-class>
重启服务器可以完成中文文件名的图片的上传了！
3、中文目录乱码问题
1)同上修改文件名乱码（1）
2)修改doGet（）方法中的
String newFolderStr = UtilsFile.sanitizeFolderName(request
.getParameter("NewFolderName"));
为
String tempStr=request.getParameter("NewFolderName");
tempStr=new String(tempStr.getBytes("iso8859-1"),"UTF-8");
String newFolderStr = UtilsFile.sanitizeFolderName(tempStr);
3）、同上修改文件名乱码（3）
4、引用中文名的图片显示时不能正常使用。
1）此时需要修改tomcat连接器的配置。但是此方法不好，会对get方法提交的内容造成乱码
在 <Connector port="8080" maxHttpHeaderSize="8192"
maxThreads="150" minSpareThreads="25" maxSpareThreads="75"
enableLookups="false" redirectPort="8443" acceptCount="100"
connectionTimeout="20000" disableUploadTimeout="true" />
增加一项配置 URIEncoding="UTF-8"如下
<Connector port="8080" maxHttpHeaderSize="8192"
maxThreads="150" minSpareThreads="25" maxSpareThreads="75"
enableLookups="false" redirectPort="8443" acceptCount="100"
connectionTimeout="20000" disableUploadTimeout="true" URIEncoding="UTF-8"/>
2）方法二：
还是和以上解决中文文件名一样，修改ConnectorServlet.java
doPost方法中修改代码
if (!ExtensionsHandler.isAllowed(resourceType, extension))
ur = new UploadResponse(UploadResponse.SC_INVALID_EXTENSION);
else {
为//此处修改filename的目的是为了避免显示图片时因中文名而无法预览。
filename=UUID.randomUUID().toString()+"."+extension;
if (!ExtensionsHandler.isAllowed(resourceType, extension))
ur = new UploadResponse(UploadResponse.SC_INVALID_EXTENSION);
else {
十、控制允许上传的文件类型
1、在java-core核心包中的类net.fckeditor.handlers中
复制需要修改的内容到
上文提到的在src下新建的fckeditor.propertis
例如复制
connector.resourceType.image.extensions.allowed = bmp|gif|jpeg|jpg|png
修改为connector.resourceType.image.extensions.allowed = bmp|gif|jpeg|jpg|png|abc
2、需要修改相应的客户端的配置文件，即上文中提到的myconfig.js
在fckconfig.js中找到FCKConfig.ImageUploadAllowedExtensions = ".(jpg|gif|jpeg|png|bmp)$" ;
拷贝到myconfig.js（待续）
修改为FCKConfig.ImageUploadAllowedExtensions = ".(jpg|gif|jpeg|png|bmp|abc)$" ;
那么以abc结尾的格式的图片也可以上传了。
3、各类上传文件类型修改时对应操作如下如
4、上传时控制文件大小
十一、控制上传文件的大小
1、在服务器端的servlet中，在保存文件之前判断一下文件的大小，如果超出了限制，就传递一个自定义的错误码，并不在保存文件
2、修改对应页面的回调函数，增加对这个自定义的错误码的处理。
3、具体操作
1）修改自己创建的ConnectorServlet.java类在原文件位置
if (!ExtensionsHandler.isAllowed(resourceType, extension)){
ur = new UploadResponse(UploadResponse.SC_INVALID_EXTENSION);
的下方增加为
//如果该文件的扩展名不允许上传
if (!ExtensionsHandler.isAllowed(resourceType, extension)){
ur = new UploadResponse(UploadResponse.SC_INVALID_EXTENSION);
}
//如果文件大小超出限制，则传递一个自定义的错误码
else if(uplFile.getSize()>10*1024*1024){
ur = new UploadResponse(204);//204来历看下面第2）点
}
2）在上传页面上点击右键看属性，找到文件为找到文件fck_image.html，根据这个文件看它引用了哪个js文件，找到了文件
fck_image.js,打开该文件（路径为/fckeditor/editor/dialog/fck_image/fck_image.js）看到错误码204还未被使用。
添加如下代码case203下面
case 204 :
alert( "the file is too big" ) ;++++++
return ;
3）修改页面frmupload.html的回调函数，增加对这个自定义的错误码的处理。修改方法同上。
4）若要把提示信息都改成中文，修改方法在对应的页面中把提示信息改成中文就可以了
case 204 :
alert( "你上传的文件超过规定大小" ) ;
return ;