Fckeditor学习笔记配置fckeditor工程1、新建web project2、引入以下5个jar包，可以见工程中的reference library3、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.js2、加载自定义文件配置会覆盖相同的配置项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 | brFCKConfig.ShiftEnterMode = 'br' ; // p | div | brB、拷贝上面的到myconfig.js文件C、修改为FCKConfig.EnterMode = 'br' ; // p | div | brFCKConfig.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.javadoPost方法中修改代码 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 ;
相关资源：敏捷开发V1.0.pptx
