fckeditor入门

秋风扫落叶

浏览: 136233 次
性别:
来自: 成都

最近访客更多访客>>

ceesun

抛出异常的爱

guojing2010

mssk110

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

web技术

fckeditor

第一步：下载FCKeditor文件

第二步：解压到站点的WebRoot目录下

第三步 : 验证你是否安装成功
格式：
http://<your site>/<CKEditor installation path>/_samples/default.html
实例:
http://www.example.com/ckeditor/_samples/default.html

配置：
1、将FCKeditor集成到你的项目当中去。
将下面的js文件添加到你的jsp文件中的head标签中
<script type="text/javascript" src="/blog/fckeditor/fckeditor.js"></script>
<script type="text/javascript">
window.onload = function()
{
var oFCKeditor = new FCKeditor('textarea标签的名称') ;
oFCKeditor.BasePath = "/blog/fckeditor/" ;
oFCKeditor.ToolbarSet = 'Default' ;
oFCKeditor.Height=400;
oFCKeditor.ReplaceTextarea() ;
}
</script>
注意:/blog/fckeditor/fckeditor.js中的/blog是文本项目名称

========》自定义标签《=========
必须的jar文件：
commons-fileupload-1.2.1.jar
commons-io-1.3.2.jar
commons-io-1.3.2.jar
slf4j-api-1.5.6.jar
slf4j-simple-1.5.6.jar其中，slf4j-api-1.5.6.jar和slf4j-simple-1.5.6.jar必须是一个版本

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="FCK" uri="http://java.fckeditor.net" %>
<html>
<title></title>
<body>
<FCK:editor instanceName="myEditor" basePath="/fckeditor" value="this is a value" toolbarSet="myToobar"></FCK:editor>
</body>
</html>

========》创建自己的配置文件《=========
Fckeditor的主配置文件是fckconfig.js，可以直接修改此配置文件，但是不推荐。建议创建额外的配置文件。如myconfig.js
具体步骤如下：
1、创建myconfig.js配置文件（WebRoot下）
2、添加内容，如：
FCKConfig.AutoDetectLanguage= false ;
FCKConfig.DefaultLanguage= 'en' ;
3、将配置文件添加到fckditor中
a、在主配置文件中配置（fckconfig.js）
修改此属性：FCKConfig.CustomConfigurationsPath = '/项目名称/自定义的配置文件名称' ;
如：FCKConfig.CustomConfigurationsPath = '/test/myconfig.js'
注意：第一个/代表当前站点路径，

b、在调用的页面中指定配置文件,如：
<script type="text/javascript">
var oFCKeditor = new FCKeditor("FCKeditor1");
oFCKeditor.BasePath="/test/fckeditor/";
oFCKeditor.Witdh="50%";
oFCKeditor.Height="400";
oFCKeditor.Value="initial value";
oFCKeditor.ToolbarSet="Basic";

c、将创建的配置文件放在fckconfig.js相同的目录下，然后修改fckconfig.js文件，
FCKConfig.CustomConfigurationsPath = FCKeditor.EditorPath + "自定义的配置文件名称"

oFCKeditor.Config[“CustomConfigurationsPath]="/项目名称/配置文件的名称";

oFCKeditor.Create();
</script>
注意：a方式会影响所有页面，b方式只会影响指定的页面

==========》修改配置文件《=========
1、自定义ToolbarSet，去掉一些功能
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','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.
] ;
上面用单引号引起来的单词是一个功能，如：‘Source'表是源码
'-'表示分隔符
'/'表示换行
将自定义的Toolbar设置到项目中：
a、<FCK:editor instanceName="myEditor" basePath="/fckeditor" value="this is a value" toolbarSet="自定义的Toolbar名称"></FCK:editor>

b、oFCKeditor.ToolbarSet="自定义的Toolbar名称";

2、加上几种常用的字体
FCKConfig.FontFormats= 'p;h1;h2;h3;h4;h5;h6;pre;address;div' ;
FCKConfig.FontNames= 'Arial;Comic Sans MS;Courier New;Tahoma;Times New ;'
FCKConfig.FontSizes = 'smaller;larger;xx-small;x-small;small;medium;large;x-large;xx-large' ;

FCKConfig.FontFormats 字体格式
FCKConfig.FontNames 字体名称
FCKConfig.FontSizes 字体大小

将你要添加的字体添加到FCKConfig.FontNames中即可

注意：保存时一定要使用UTF-8格式
3、修改“回车”和“shift+回车"的换行行为
FCKConfig.EnterMode = 'p' ; // p | div | br 回车模式
FCKConfig.ShiftEnterMode = 'br' ; // p | div | br shift+回车模式
p | div | br为可选项

4、修改编辑区样式文件
FCKConfig.EditorAreaCSS = FCKConfig.BasePath + 'css/fck_editorarea.css' ;
其中的FCKConfig.BasePath为fckeditor/editor目录
修改fck_editorarea.css中的样式就可以了

5、文件上传的功能
第一步：在你的web.xml文件中声明一个Servlet，代码如下
<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的文件，并且添加到classpath路径中，即添加到src目录下，添加下列信息：
connector.userActionImpl=net.fckeditor.requestcycle.impl.UserActionImpl

问题：
1、出现乱码
先查看你上传的资源在服务器端是否也是乱码，然后看fckeditor/editor/filemanager/browser/default/frmresourceslist.html文件是否处理了乱码，再看net.fckeditor.connector.ConnectorServlet类中是否处理乱码，如果没有则处理。
处理过程：
由于net.fckeditor.connector.ConnectorServlet源代码不能被修改，所以把此类的代码全部复制出来，在src下新建一个Servlet类，名字也叫ConnectorServlet，然后修改内容,修改web.xml，加入你修改后的 ConnectorServlet的全路径为com.blog.servlet.ConnectorServlet，则修改如下：
<servlet-class>
          com.blog.servlet.ConnectorServlet
</servlet-class>
2、创建目录出现乱码（由于net.fckeditor.connector.ConnectorServlet源代码不能被修改，所以把此类的代码全部复制出来，在src下新建一个Servlet类，名字也叫ConnectorServlet，然后修改内容,修改web.xml，加入你修改后的 ConnectorServlet的全路径为com.blog.servlet.ConnectorServlet，则修改如下：）

com.blog.servlet.ConnectorServlet中的
String newFolderStr =
UtilsFile.sanitizeFolderName(request .getParamete("NewFolderName"));代码改为：

String tempStr = request.getParameter("NewFolderName");
tempStr = new String(tempStr.getBytes("iso8859-1"),"UTF-8");
String newFolderStr = UtilsFile.sanitizeFolderName(tempStr);

3、中文名称的图片不能显示
第一种方式：修改Tomcat服务器中conf目录下的server.xml文件中的
<Connector port="8080" protocol="HTTP/1.1"
               connectionTimeout="20000"
               redirectPort="8443"
/>中添加URLEncoding=“UTF-8”，重启服务器
(不推荐使用，因为会影响到中文的传输)

第二种方式:
我们避免出现中文名字的图片
由于net.fckeditor.connector.ConnectorServlet源代码不能被修改，所以把此类的代码全部复制出来，在src下新建一个Servlet类，名字也叫ConnectorServlet，然后修改内容,修改web.xml，加入你修改后的 ConnectorServlet的全路径为com.blog.servlet.ConnectorServlet，则修改如下：

// We upload only one file at the same time
FileItem uplFile = items.get(0);
String rawName = UtilsFile.sanitizeFileName(uplFile.getName());
String filename = FilenameUtils.getName(rawName);
String baseName = FilenameUtils.removeExtension(filename);
String extension = FilenameUtils.getExtension(filename);
在上面的代码下加下面这条语句：
filename=UUID.randomUUID().toString() + "." + extension;

该方式就是借助工具将图片中的中文去掉，生成新的图片名称

4、控制允许文件上传的文件类型
FCKeditor将上传的文件分为四种：
file（文件），image（图片），flash，media（多媒体文件）
配置分为客服端和服务端配置，客服端和服务端的文件类型必须一样
可以在net/fckeditor/handlers目录下找到默认的配置文件default.properties包含了所有的配置项
Fckeditor.properties
connector.resourceType.file.extensions.allowed = 7z|aiff|asf|avi|bmp|csv|doc|fla|flv|gif|gz|gzip|jpeg|jpg|mid|mov|mp3|mp4|mpc|mpeg|mpg|ods|odt|pdf|png|ppt|pxd|qt|ram|rar|rm|rmi|rmvb|rtf|sdc|sitd|swf|sxc|sxw|tar|tgz|tif|tiff|txt|vsd|wav|wma|wmv|xls|xml|zip   （配置允许上传的文件类型）

connector.resourceType.image.extensions.allowed = bmp|gif|jpeg|jpg|png （允许上传的图片类型）

connector.resourceType.flash.extensions.allowed = swf|fla （允许上传flash的类型）

connector.resourceType.media.extensions.allowed = aiff|asf|avi|bmp|fla|flv|gif|jpeg|jpg|mid|mov|mp3|mp4|mpc|mpeg|mpg|png|qt|ram|rm|rmi|rmvb|swf|tif|tiff|wav|wma|wmv   （允许上传多媒体类型）

注意：配置是按你的需要选择上面的个文件类型

找fckconfig.js配置文件包含了所有的配置项
myfckeditor.js自定义的客服端配置文件

FCKConfig.ImageUploadAllowedExtensions = ".(jpg|gif|jpeg|png|bmp)$" ; （图片）
FCKConfig.FlashUploadAllowedExtensions= ".(swf|flv)$" ;（flash）
FCKConfig.LinkUploadAllowedExtensions = ".(7z|aiff|asf|avi|bmp|csv|doc|fla|flv|gif|gz|gzip|jpeg|jpg|mid|mov|mp3|mp4|mpc|mpeg|mpg|ods|odt|pdf|png|ppt|pxd|qt|ram|rar|rm|rmi|rmvb|rtf|sdc|sitd|swf|sxc|sxw|tar|tgz|tif|tiff|txt|vsd|wav|wma|wmv|xls|xml|zip)$" ; （文件）
客服端不支持配置多媒体

注意：根据需要选择类型

5、控制允许上传文件的大小（注：fckeditor没有提供这种配置，只能修改它的源代码）
由于net.fckeditor.connector.ConnectorServlet源代码不能被修改，所以把此类的代码全部复制出来，在src下新建一个Servlet类，名字也叫ConnectorServlet，然后修改内容,修改web.xml，加入你修改后的 ConnectorServlet的全路径为com.blog.servlet.ConnectorServlet，则修改如下：
修改前：
if (!ExtensionsHandler.isAllowed(resourceType, extension))
ur = new UploadResponse(UploadResponse.SC_INVALID_EXTENSION);
else {
// construct an unique file name
File pathToSave = new File(currentDir, filename);

修改后：
if (!ExtensionsHandler.isAllowed(resourceType, extension))
     ur = new UploadResponse(UploadResponse.SC_INVALID_EXTENSION);
else if(uplFile.getSize()> 100 * 1024) //添加的代码
    ur = new UploadResponse(204); //自定义错误码204
else {
// construct an unique file name
   File pathToSave = new File(currentDir, filename);

客服端修改：
找到相应的页面
如：fck_image.js中的
switch ( errorNumber )
{
case 0 : // No errors
alert( 'Your file has been successfully uploaded' ) ;
break ;
case 1 : // Custom error
alert( customMsg ) ;
return ;
case 101 : // Custom warning
alert( customMsg ) ;
。。。
}
添加204错误。因为上面定义的204错误

调用服务端的Servlet进行验证
客服端 ————————————————————>     服务端
如果验证失败，返回错误码
客服端 <————————————————————     服务端
弹出错误信息
客服端      ————————————

6、在表单中使用FCKeditor
将创建FCKeditor的代码放到表单中即可

<from>
       <script type="text/javascript">
var oFCKeditor = new FCKeditor("FCKeditor1");
oFCKeditor.BasePath="/test/fckeditor/";
oFCKeditor.Witdh="50%";
oFCKeditor.Height="400";
oFCKeditor.Value="initial value";
oFCKeditor.ToolbarSet="Basic";
oFCKeditor.Create();
        </script>
<submit
</from>

========》更换表情图片《========
以下是配置表情图片的配置项：
FCKConfig.SmileyPath= FCKConfig.BasePath + 'images/smiley/msn/' ;
FCKConfig.SmileyImages=['myImage.gif','regular_smile.gif','sad_smile.gif',.....] ;
FCKConfig.SmileyColumns = 8 ;
FCKConfig.SmileyWindowWidth= 320 ;
FCKConfig.SmileyWindowHeight= 210 ;

配置选项的大意：
FCKConfig.SmileyPath（表情图片的放置路径；fckeditor/editor/images/smiley/msn）
FCKConfig.SmileyImages（要显示的图片）
FCKConfig.SmileyColumns (每行显示几个表情图片)
FCKConfig.SmileyWindowWidth (显示图片框的宽度)
FCKConfig.SmileyWindowHeight （显示图片框的高度）

替换方法一
步骤：
1、将图片增加到fckeditor/editor/images/smiley/msn路径中
2、将图片的名称添加到FCKConfig.SmileyImages中
注：以上的配置选项在FCKeditor的主配置文件中fckconfig.js

替换方法二
步骤：
1、将图片保存在一个文件夹中，然后将文件夹保存在fckeditor/editor/images/smiley目录下
2、将图片的名称添加到FCKConfig.SmileyImages中（格式参考主配置文件）

设置表情图片的宽高和滚动条
1、设置宽度，如：FCKConfig.SmileyWindowWidth=200；
2、设置表情显示的个数，如：FCKConfig.SmileyColumns=8；
3、设置高度，如:FCKConfig.SmileyWindowHeight=300;
但是，如果你加入的表情图片很对，高度的设置将不会有效，因为Fckeditor会自动的显示所有图片。所以需要修改源文件（fckeditor/editor/dialog/fck_smiley.html）将dialog.SetAutoSize( true ) ;语句注释掉或则改为false。此时还会出现表情图片不能全部显示出来的问题，解决方法是将（fckeditor/editor/dialog/fck_smiley.html）源文件中的<body style="overflow: hidden">语句的hidden改为auto，然后保存刷新就可以了。

分享到：

el表达式 | JAVA Annotation入门

2012-10-09 15:45
浏览 1096
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论