Fckeditor学习研究整理笔记

whp0731

浏览: 174815 次
性别:
来自: 杭州

最近访客更多访客>>

dj98986

sea_wave2011

z1414644039

a1641693970

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

fckeditor Servlet JavaScript .net CSS

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 ;