今天学习了一下FCKeditor ,用的是2.6.6版本的,下载地址http://sourceforge.net/projects/fckeditor/files/
下在FCKeditor_2.6.6、fckeditor-java-2.6-bin、fckeditor-java-demo-2.6.war
使用步骤:
1、将FCKeditor_2.6.6/下的fckeditor复制到webRoot下;
2、fckeditor-java-demo-2.6.war下的lib里的jar拷贝在项目的lib里
修改配置 fckconfig.js
1种、修改配置,自己写一个配置myfckconfig.js覆盖默认的配置fckconfig.js
2种、修改配置,复原第一种,然后在创建的时候写oFCKeditor.Config["CustomConfigurationsPath"] ="/fckeditor/myfckconfig.js";
以下修改配置采用第2种
myfckconfig.js
//定义了自己的工具栏
FCKConfig.ToolbarSets["dxxSet"] = [
['Source','DocProps'] ,
['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote','CreateDiv'],
['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.
] ;
//修改会出和段落
FCKConfig.ShiftEnterMode = 'p' ; // p | div | br
FCKConfig.EnterMode = 'br' ; // p | div | br
FCKConfig.FontNames = '宋体;楷体_GB2312;黑体;隶书;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;
//修改样式的,未作需要再做
//FCKConfig.EditorAreaCSS = FCKConfig.BasePath + 'css/fck_editorarea.css' ;
//表情图片的
//添加图片qq.bmp,也可以添加一个文件夹,做相应的修改
FCKConfig.SmileyPath = FCKConfig.BasePath + 'images/smiley/msn/' ;
FCKConfig.SmileyImages = ['qq.bmp','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','thumbs_down.gif','thumbs_up.gif','heart.gif','broken_heart.gif','kiss.gif','envelope.gif'] ;
FCKConfig.SmileyColumns = 8;//每行显示的表情个数
FCKConfig.SmileyWindowWidth = 650;//显示表情框的大小,整个的大小
FCKConfig.SmileyWindowHeight = 350 ;
彻底的修稿配置的做法是:将myfckconfig.js拷贝到fckeditor/editor下面,在fckconfig.js第一行改为
FCKConfig.CustomConfigurationsPath = FCKConfig.BasePath+'myfckconfig.js' ;
关于FCKeditor的几点修改问题
1、上传图片的修改
参考fckeditor-java-2.6-bin/fckeditor-java-2.6/site/connector_servlet.html
右侧单击Connector Servlet,有两个步骤
1.1、在web.xml加入
<servlet>
<servlet-name>ConnectorServlet</servlet-name>
<servlet-class>
net.fckeditor.connector.ConnectorServlet
</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>ConnectorServlet</servlet-name>
<url-pattern>
/fckeditor/editor/filemanager/connectors/*
</url-pattern>
</servlet-mapping>
1.2、在src下创建fckeditor.properties
FCKeditor2.6中servlet有了一些变化,控制器ConnectorServlet.java和Dispatcher.java是我们解决中文问题的主要修改 文件。以前版本都在ConnectorServlet.java中,2.6之后都在Dispatcher.java中了。
内容如下: connector.userActionImpl=net.fckeditor.requestcycle.impl.EnabledUserAction
问题1、当文件为中文时,小心乱码,2.4的会乱码,因为ConnectorServlet.clss的doPost为对request设置
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
2.6的一对这点进行了修改,不会出现中文乱码
问题2、创建中文文件夹时乱码 修改的是Dispatcher.java的doGet
String newFolderNameStr=request.getParameter("NewFolderName");
newFolderNameStr=new String(newFolderNameStr.getBytes("iso8859-1"),"UTF-8");
问题3、引用中文的图片不能正常显示
方法1(建议不使用)、在D:/Tomcat6.0/conf/server.xml中
<Connector port="8080" protocol="HTTP/1.1"
connectionTimeout="20000"
redirectPort="8443" />
----》
<Connector port="8080" protocol="HTTP/1.1"
connectionTimeout="20000"
redirectPort="8443"
URIEncoding="UTF-8"
/>
方法2、保存的时候把中文名改成非中文
修改的是Dispatcher.java的doPost里面
String fileName = FilenameUtils.getName(uplFile.getName());
String extension= FilenameUtils.getExtension(fileName);
fileName =UUID.randomUUID.toString()+"."+extension;
2、文件上传的类型
fckeditor-java-2.6-bin/fckeditor-java-2.6/site/properties.html
里查看Connector下面包含允许的file,image,flash,media的类型
若想增加类型以image为例:
1、首先在客户端修改fckconfig.js(media在客户端不对应的项)
可以再myfckconfig.js里修改
FCKConfig.ImageUploadAllowedExtensions = ".(jpg|gif|jpeg|png|bmp)$" ;
connector.resourceType.image.extensions.allowed = bmp|gif|jpeg|jpg|png
做相应的修改即可
本文介绍了如何下载并安装 FCKeditor 2.6.6,提供了详细的使用步骤,包括文件复制、库文件拷贝、配置修改等,并针对中文环境提供了解决中文乱码和文件夹乱码的问题。此外,还分享了如何通过修改配置文件来定制工具栏、修改段落行为、调整字体样式以及如何进行图片上传的中文路径设置。


被折叠的 条评论
为什么被折叠?



