文本编辑工具fck使用介绍

kingge08

浏览: 250637 次
性别:
来自: 北京

最近访客更多访客>>

jiviang

747017186

shareal

keguan_li

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

FCKeditor

fckeditor Servlet JavaScript CSS Flash

Fckedit简介
废话不多说直接写用法了：
http://ckeditor.com/
下载配置文件：
    这里我们要下两个：第一个：FCKeditor_2.6.6.zar 、第二个：fckeditor-java-2.6-bin.zip（在java平台开发）第三个：fckeditor-java-2.6-src.zip（源码）

调用方式：（js and jsp）
一.通过javascript调用
第一种方法：
0>将FCKeditor_2.6.6.zar解压后的fckeditor文件拷贝到WebRoot根目录下
1>、链接script
        <script src="fckeditor/fckeditor.js" type="text/javascript"></script>
2>、在body标签里面加上
        <body>
            This is my HTML page.<br>
            <script type="text/javascript">
            var oFCKeditor = new FCKeditor('FCKeditor1');//‘FCKeditor1’输入框的name
            /*默认/fckeditor/：http://localhost:8080/fckeditor*/
            //http://localhost:8080/fckedit/fckeditor
            oFCKeditor.BasePath = "/fckedit/fckeditor/";
            oFCKeditor.Create();
            </script>
        </body>
第二种方法：
0>将FCKeditor_2.6.6.zar解压后的fckeditor文件拷贝到WebRoot根目录下
1>、链接script
        <script src="fckeditor/fckeditor.js" type="text/javascript"></script>
2>、在head标签里面加上
        <script type="text/javascript">
        window.onload = function()
        {
        var oFCKeditor = new FCKeditor( 'MyTextarea' ) ;
        oFCKeditor.BasePath = "/fckedit/fckeditor/" ;
        oFCKeditor.ReplaceTextarea() ;
        }
        </script>
3>、在body标签里面加上：
        <textarea cols="60" rows="4" id="MyTextarea" name="MyTextarea">Hello</textarea>

注意：
1.BasePath要正确的设置
2.BasePath一定要以“/”结尾

FCKEdit对象的属性：
名称             描述                                                     默认值
width            宽度                                                     100%
hetght           高度                                                     200
value            编辑器初始化内容                                         空字符串
ToolbarSet       工具条集合的名称（内置有Default和Basic也可以直接定制）   Default
BasePath         编辑器的基路径                                           /feckeditor/

构造器：
var FCKeditor = function（instanceName,width,height,toolbarSet,value）
.其中instanceName为编辑器输出的textarea元素的name属性值,必须指定
.参数会复制给同名属性

二.在jsp中通过自定义标签调用
0>将fckeditor-java-2.6-bin.zar 解压后的fckeditor-java-core-2.6.jar和lib目录下的jar文件拷贝到WebRoot/lib目录下一共7个：
    commons-fileupload-1.2.1.jar
    commons-io-1.3.2.jar
    fckeditor-java-core-2.6.jar
    imageinfo-1.9.jar
    java-core-2.6.jar
    slf4j-api-1.5.8.jar
    slf4j-simple-1.5.8.jar
2>导入标签：
    <%@ taglib uri="http://java.fckeditor.net" prefix="FCK" %>
3>在body标签里面加上：
    <FCK:editor instanceName="myEditor" basePath="/fckeditor" value="helloworld"></FCK:editor>

注意：
1.basePath 以‘/’开发,并且代表当前工程的路径
2.一定要设置value的属性值，并且值不能是空字符串即可以用但不可以用“”。

配置FCKEditor

主配置文件fckconfig.js但我们一般不直接在里面修改配置属性。
这里先介绍自定义一个配置文件myconfig.js
1.我们新建一个js文件：myconfig.js
2.修改fckconfig.js里面的FCKConfig.CustomConfigurationsPath = '' ;
改成：FCKConfig.CustomConfigurationsPath = '/fckedit/myconfig.js' ;
3.在页面的调用代码中对FCKeditor的实例进行配置
oFCKeditor.Config["CustomConfigurationPath"] = "/myconfig.js"

配置加载顺序：
1.加载主配置文件fckconfig.js
2.加载自定义的配置文件（如果有）覆盖相同的配置项
3.使用对实例的配置覆盖相同的配置项（只对当前的实例有效）

一般需要的修改的配置:
1.自定义ToolbarSet，去掉一些功能
2.加上几种常用的字体
3.修改“回车”和“Shift+回车”的换行行为
4.修改编辑区的样式文件
5.更换表情图片
下面一一介绍这5种修改配置：

1.自定义ToolbarSet，去掉一些功能
1>、新建一个myconfig.js配置文件将/fckedit/WebRoot/fckeditor/fckconfig.js文件里的ToolbarSets配置项copy到里面：
FCKConfig.ToolbarSets["zchen"] = [
    ['Source','DocProps'],
    ['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
    ['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
    ['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],
    '/',
    ['Style','FontFormat','FontName','FontSize'],
    ['TextColor','BGColor'],
    ['FitWindow','ShowBlocks','-','About']        // No comma for the last row.
] ;
去掉一些你不需要的功能：‘-’分行、‘/’分段
2>、在/fckedit/WebRoot/fckeditor/fckconfig.js下修改：
FCKConfig.CustomConfigurationsPath = '/fckedit/myconfig.js' ;引入自定义的配置文件
3>、在页面中引入修改了的配置文件：
    <head>
        <script src="fckeditor/fckeditor.js" type="text/javascript"></script>
        <script type="text/javascript">
        window.onload = function()
        {
        var oFCKeditor = new FCKeditor( 'MyTextarea' ) ;
        oFCKeditor.BasePath = "/fckedit/fckeditor/" ;
        oFCKeditor.ToolbarSet = "zchen" ;
        oFCKeditor.ReplaceTextarea() ;
        }
        </script>
    </head>

2.加上几种常用的字体
第一种、在 fckconfig.js文件配置：
默认情况下,FCKEditor在进行文本编辑时,无法使用中文字体。
打开 fckconfig.js 文件
找到第154行(应该是),会发现:
程序代码：
FCKConfig.FontNames = 'Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;
将其修改为
FCKConfig.FontNames = '宋体;黑体;幼圆;楷体_GB2312;仿宋_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;
这样还是不行，虽然发现编辑器的字体选项多了已添加的中文字体，但应用到文本上却发现没有任何作用！
接着下一步：
打开editor/css/fck_editorarea.css 文件
将程序代码:
font-family: Arial, Verdana, sans-serif;
修改为：
font-family: 宋体, 黑体, 幼圆, 楷体, 仿宋, Arial, Verdana, sans-serif;
注意：一定要“另保存”为 UTF-8编码格式的文档，否则会出现乱码！
第二种、在自定义文件中配置
我们可以在我们自定义myconfig.js文件中修改：
FCKConfig.FontNames    = '宋体;楷体;_GB2312;黑体;隶书;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;

3.修改“回车”和“Shift+回车”的换行行为
在fckconfig.js文件下将这两个配置属性的值对换一下修改后的结果是：
FCKConfig.EnterMode = 'br' ;            // p | div | br
FCKConfig.ShiftEnterMode = 'p' ;    // p | div | br

4.修改编辑区的样式文件：
FCKConfig.EditorAreaCSS = FCKConfig.BasePath + 'css/fck_editorarea.css' ;
修改fck_editorarea.css里面的样式即可。

5.更换表情图片
修改在fckconfig.js文件下的
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','thumbs_down.gif','thumbs_up.gif','heart.gif','broken_heart.gif','kiss.gif','envelope.gif'] ;
FCKConfig.SmileyColumns = 8 ;
FCKConfig.SmileyWindowWidth        = 320 ;
FCKConfig.SmileyWindowHeight    = 210 ;
复制到我们自定义的myconfig.js文件里：
FCKConfig.SmileyPath    = FCKConfig.BasePath + 'images/smiley/msn/' ;
FCKConfig.SmileyImages    = ['logp.jpg','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        = 320 ;
FCKConfig.SmileyWindowHeight    = 210 ;
1>将我们要加入的图片放到： 'images/smiley/msn/' 目录里。
2>将图片的名字引入FCKConfig.SmileyImages里面：
3>修改窗口的大小：
FCKConfig.SmileyWindowWidth        =640 ;
FCKConfig.SmileyWindowHeight    = 480 ;
4>修改每行显示多少个：FCKConfig.SmileyColumns = 10 ;
然后在：/fckedit/WebRoot/fckeditor/editor/dialog/fck_smiley.html文件下修改：
window.onload = function ()
{
    // First of all, translate the dialog box texts
    oEditor.FCKLanguageManager.TranslatePage(document) ;

    //dialog.SetAutoSize( true ) ;
}
5>让窗口出现滚动条：
在/fckedit/WebRoot/fckeditor/editor/dialog/fck_smiley.html文件下修改：
<body style="overflow: auto">

6>、将自定义的配置文件也放到fckeditor/editor目录下面则需要在/fckedit/WebRoot/fckeditor/fckconfig.js文件修改下：
FCKConfig.CustomConfigurationsPath = FCKConfig.EditorPath+'myconfig.js' ;

实现文件上传功能：
1>、Declare the ConnectorServlet in your web.xml:
<web-app version="2.4">
    ...
    <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>
    ...
</web-app>
2>.Create a fckeditor.properties file in your classpath and add(在src目录下创建一个fckeditor.propertity文件将):
    connector.userActionImpl=net.fckeditor.requestcycle.impl.EnabledUserAction

下面简述使用上传时遇到的问题：
1.上传文件名为中文时名字会出现乱码：
在版本2.4中：
1>、检查客户端页面编码是否正确：打开在/fckedit/WebRoot/fckeditor/editor/filemanager/browser/default/frmupload.html文件查看编码是不是utf-8(这里确认是正确的)
2>、检查服务器端的servlet上传代码：net.fckeditor.connector.ConnectorServlet.class
先关联上源码，源码在fckeditor-java-2.6-src.zar包里。
3>、新建一个setvlet这里名字也取为ConnectorServlet然后将关联后的ConnectorServlet.class的代码复制到我们建的Servlet里面。
4>、在246行加上upload.setHeaderEncoding("utf-8")
5>、修改web.xml的映射路径
在版本fckeditor-java-2.6-bin.zip中：则不会出现这种情况只需要：1、在web.xml文件中映射servlet 2、创建fckeditor.propertity文件

2.创建中文名的目录时会出现乱码：
    同理先检查客服端再检查服务器端和上面情况一样在2.6版本中不会出现乱码情况。
    在2.4可以将：ConnectorServlet.java代码在156行加上：
    String fileName = request.getParameter("NewFolderName");
    fileName = new String(fileName.getBytes("iso8859-1"),"UTF-8");

3.引用的中文名字的图片不能正常显示：
1>、修改tomcat配置在conf/server.xml :<Connector .... URIEncoding="UTF-8"/>:不推荐使用
2>、在ConnectorServlet代码的176行加上：filename = UUID.randomUUID().toString()+"."+extension;上传后的图片将不再以原来的名字保存而是会换成uuid编码形式

4.控制允许上传的文件的类型：
FCKeditor把上传的文件分成4类：File、Image、Flash、Media
文件分类              客户端验证配置(fckconfig.js)                      服务器端验证配置(fckeditor.properties)
File                  FCKConfig.LinkUploadAllowedExtensions             connector.resourceType.file.extensions.allowed
Image                 FCKConfig.ImageUploadAllowedExtensions            connector.resourceType.image.extensions.allowed
Flash                 FCKConfig.FlashUploadAllowedExtensions            connector.resourceType.flash.extensions.allowed
Media                 无对应配置                                        connector.resourceType.media.extensions.allowed
假如我们要上传以.zc结尾的文件则：
1>、在net.fckeditor.handlers下把default.properties里的connector.resourceType.image.extensions.allowed = bmp|gif|jpeg|jpg|png这一项
放到我们自定义的/fckedit/src/fckeditor.properties里面并加上后缀。
2>、在/fckedit/WebRoot/fckeditor/fckconfig.js文件下把 FCKConfig.ImageUploadAllowedExtensions    = ".(jpg|gif|jpeg|png|bmp)$" ;        // empty for all
拷贝到我们自定义的myconfig.js文件里面并加上我们要加上的后缀：FCKConfig.ImageUploadAllowedExtensions    = ".(jpg|gif|jpeg|png|bmp|abc)$" ;        // empty for all

控制允许上传的文件的大小：
1>.在服务器端的servlet中，在保存文件之前先判断一下文件大小，如果超出限制就传递一个自定义的错误吗并且不再保存文件
2>、修改对应的页面中的回调函数，增加对这个自定义的错误码的处理
例如：不允许上传大于10k的文件(默认是没限制的)
先增加错误码在/fckedit/WebRoot/fckeditor/editor/dialog/fck_image/fck_image.js文件474行添加这个：
        case 204 :
            alert( "文件大小超出限制" ) ;
            return ;
然后修改ConnectorServlet：
   filename = UUID.randomUUID().toString()+"."+extension;
                    //如果这个文件的扩展名不允许上传
                     if (!ExtensionsHandler.isAllowed(resourceType, extension)) {
                         obj[0] = UploadResponse.SC_INVALID_EXTENSION;
                         obj[1] = null;
                         obj[2] = null;
                         obj[3] = null;
                         ur = new UploadResponse(obj);
                     }//如果文件大小超出限制
                     else if(uplFile.getSize()>10*1024*1024){
                         obj[0] = 204;
                         obj[1] = null;
                         obj[2] = null;
                         obj[3] = null;
                         //传递一个自定义的错误码
                         ur = new UploadResponse(obj);
                     }