当前位置： 代码迷 >> Web前端 >> 文本编辑工具fck运用介绍
  详细解决方案

文本编辑工具fck运用介绍

热度：227   发布时间：2012-10-28 09:54:44.0
文本编辑工具fck使用介绍

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);
???????????????????? }


  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.