FCKeditor配置与使用-白红宇

fckeditor - (1)资料介绍与安装

fckeditor介绍

FCKeditor是一个专门使用在网页上属于开放源代码的所见即所得文字编辑器。

1.fckeditor官网：

2.fckeditor下载：

FCKeditor_2.6.3（客户端javascript主程序）

FCKeditor.Java（支持j2ee web平台服务器端程序）

fckeditor-java-2.4-bin.zip(执行文件)

fckeditor-java-2.4-src.zip（源文件）

fckeditor-java-demo-2.4.war（样例）

3.fckeditor样例

demo1:默认fckeditor

demo2:多语言

demo3:自定义工具集

demo4:更换皮肤

4.fckeditor文档

开发者手册:http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide

使用者手册:http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide

安装

参考文档：

试验环境:

MyEclipse6.0+Tomcat5.0+Mysql5.0

步骤:

1.在MyEclipse中新建一个web工程TestFckeditor

2.把FCKeditor_2.6.3解压后的生成的文件夹fckeditor拷贝到WebRoot下

3.检测安装是否成功访问

fckeditor - (2)集成

集成javascript步骤

参考文档：

1.将JavaScript集成模块脚本放入<head>标签中

Html代码

2.创建fckeditor

方法一：（内联）

在<body>标签适当位置放入如下代码（通常放在标签中）

Html代码

var oFCKeditor = new FCKeditor('FCKeditor1');

oFCKeditor.BasePath = "fckeditor/";

oFCKeditor.Create();

</script>

方法二：（替代<textarea>）

在<head>标签中添加onload方法

Html代码

window.onload = function()

{

var oFCKeditor = new FCKeditor( 'MyTextarea' ) ;

oFCKeditor.BasePath = "fckeditor/" ;

oFCKeditor.ReplaceTextarea() ;

}

</script>

在<body>标签中添加以下代码

Html代码

This is <b>the</b> initial value.

</textarea>

方法三：（动态生成）

在<head>标签中定义 createFckeditor()方法

Html代码

function createFckeditor()

{

var div = document.getElementById("myFCKeditorDiv");

var fck = new FCKeditor("myFCKeditor");

fck.BasePath = "fckeditor/" ;

div.innerHTML = fck.CreateHtml();

}

</script>

在中div中动态显示fckeditor

Html代码

<a href="javascript:void(0);" οnclick="createFckeditor();"> 动态创建fckeditor </a>

fckeditor对象属性

属性名描述默认值

Width 宽度 100%

Height 高度 200

Value 编辑器初始化内容空字符串

ToolbarSet 工具条集合的名称(Default，Basic，或自定义) Default

BathPath 编辑器的基路径,BasePath要正确设置，以“/”结尾 /fckeditor

例如：

Js代码

var oFCKeditor = new FCKeditor( 'MyFckeditor' ) ;

oFCKeditor.BasePath = "fckeditor/" ;

oFCKeditor.Width="80%";

oFCKeditor.Height="200";

oFCKeditor.Value="ok";

oFCKeditor.ToolbarSet="Basic";

fckeditor构造器

Js代码

var fckeditor=function(instanceName,width,height,toolbarSet,value) ;

instanceName:编辑器输出的textarea元素的name属性或id属性的值，必须指定其他参数会赋给同名属性

例如:

Js代码

var oFCKeditor = new FCKeditor( 'MyFckeditor' ,'80%','300','Basic','ok') ;

集成java步骤

1.载入jar包

将 fckeditor-java-demo-2.4.war放入运行中的tomcat安装目录下的webapps文件夹中让其解压，从解压后的 fckeditor-java-demo-2.4\WEB-INF\lib下拷贝所有的jar文件，加入web工程的classpath中（可以拷贝到 WebRoot\WEB-INF\lib文件夹下）

jar文件包括：

fckeditor-java-core-2.4.jar

commons-fileupload-1.2.1.jar

commons-io-1.3.2.jar

slf4j-api-1.5.2.jar

slf4j-simple-1.5.2.jar

2.在jsp页面中加入tablib指令和fck标签

参看fckeditor-java-core-2.4.jar/META-INF/FCKeditor.tld

Xml代码

<short-name>FCK</short-name>

<uri>http://java.fckeditor.net</uri>

在jsp页面中加入tablib指令

Html代码

<%@ taglib uri="" prefix="FCK"%>

在<body>中加入自定义标签

Html代码

<FCK:editor instanceName="fck1" basePath="/fckeditor" value=" "></FCK:editor>

注意：basePath以"/"开头代表工程的根路径而非web服务器的根路径，一定要指定value属性，而且值不能为空字符串"",否则会抛NullPointException。

fckeditor - (3)配置

参看文档：

自定义配置方法

1.直接修改主配置文件fckconfig.js

fck主配置文件：fckeditor/fckconfig.js

2.定义单独的配置文件（只需要写需要修改的配置项）

2.1.创建myfckconfig.js配置自定义属性

将myfckconfig.js放入fckeditor/editor文件夹下，

Java代码

//系统是否自动检测并运用适当的语言界面

FCKConfig.AutoDetectLanguage = false ;

//手动设置默认的语言：法语

FCKConfig.DefaultLanguage = "fr" ;

2.2载入自定义配置文件

方法一：全局载入(对工程中所有fckeditor有效)

在fckconfig.js找到

Js代码

FCKConfig.CustomConfigurationsPath = '' ;

输入myfckconfig.js位置，FCKConfig.BasePath值fckeditor/editor文件夹

Js代码

FCKConfig.CustomConfigurationsPath = FCKConfig.BasePath+'myfckconfig.js ' ;

方法二：局部载入（只对当前网页有效）

Js代码

var oFCKeditor = new FCKeditor( "FCKeditor1" ) ;

oFCKeditor.Config["CustomConfigurationsPath"] = "myconfig.js" ;

oFCKeditor.Create() ;

3.在页面的调用代码中对FCKeditor的实例进行配置

Js代码

var oFCKeditor = new FCKeditor( "FCKeditor1" ) ;

oFCKeditor.Config["AutoDetectLanguage"] = "fasle" ;

oFCKeditor.Create() ;

配置加载顺序

1.加载主配置文件fckconfig.js

2.加载自定义的配置文件（如果有），覆盖相同的配置项

3.使用对实例的配置覆盖相同的配置项（只对当前实例有效）

主配置文件（fckconfig.js部分属性中文注释）

Js代码

FCKConfig.CustomConfigurationsPath = '' ; // 自定义配置文件路径和名称

FCKConfigFCKConfig.EditorAreaCSS = FCKConfig.BasePath 'css/fck_editorarea.css'; // 编辑区的样式表文件

FCKConfig.EditorAreaStyles = '' ; // 编辑区的样式表风格

FCKConfig.ToolbarComboPreviewCSS =''; //工具栏预览CSS

FCKConfig.DocType = '' ;//文档类型

FCKConfig.BaseHref = ''; // 相对链接的基地址

FCKConfig.FullPage = false ; //是否允许编辑整个HTML文件,还是仅允许编辑BODY间的内容

FCKConfig.StartupShowBlocks = false ;//决定是否启用"显示模块"

FCKConfig.Debug = false ;//是否开启调试功能

FCKConfigFCKConfig.SkinPath = FCKConfig.BasePath 'skins/default/' ; //皮肤路径

FCKConfig.PreloadImages=... //预装入的图片

FCKConfig.PluginsPath = FCKConfig.BasePath 'plugins/' ; //插件路径

FCKConfig.AutoDetectLanguage = true ; //是否自动检测语言

FCKConfig.DefaultLanguage = 'zh-cn' ; //默认语言

FCKConfig.ContentLangDirection = 'ltr' ; //默认的文字方向,可选"ltr/rtl",即从左到右或从右到左

FCKConfig.ProcessHTMLEntities = true ; //处理HTML实体

FCKConfig.IncludeLatinEntities = true ; //包括拉丁文

FCKConfig.IncludeGreekEntities = true ;//包括希腊文

FCKConfig.ProcessNumericEntities = false ;//处理数字实体

FCKConfig.AdditionalNumericEntities = '' ; //附加的数字实体

FCKConfig.FillEmptyBlocks = true ; //是否填充空块

FCKConfig.FormatSource = true ; //在切换到代码视图时是否自动格式化代码

FCKConfig.FormatOutput = true ; //当输出内容时是否自动格式化代码

FCKConfig.FormatIndentator = ' ' ; //当在源码格式下缩进代码使用的字符

FCKConfig.StartupFocus = false ; //开启时焦点是否到编辑器,即打开页面时光标是否停留在fckeditor上

FCKConfig.ForcePasteAsPlainText = false ; //是否强制粘贴为纯文件内容

FCKConfig.AutoDetectPasteFromWord = true ; //是否自动探测从word粘贴文件,仅支持IE

FCKConfig.ShowDropDialog = true ;//是否显示下拉菜单

FCKConfig.ForceSimpleAmpersand = false ;//是否不把&符号转换为XML实体

FCKConfig.TabSpaces = 0 ;//按下Tab键时光标跳格数,默认值为零为不跳格

FCKConfig.ShowBorders = true ;//合并边框

FCKConfig.SourcePopup = false ;//弹出

FCKConfig.ToolbarStartExpanded = true ;//启动fckeditor工具栏默认是否展开

FCKConfig.ToolbarCanCollapse = true ;//是否允许折叠或展开工具栏

FCKConfig.IgnoreEmptyParagraphValue = true ;//是否忽略空的段落值

FCKConfig.FloatingPanelsZIndex = 10000 ;//浮动面板索引

FCKConfig.HtmlEncodeOutput = false ;//是否将HTML编码输出

FCKConfig.TemplateReplaceAll = true ;//是否替换所有模板

FCKConfig.ToolbarLocation = 'In' ;//工具栏位置,

FCKConfig.ToolbarSets = object ; // 编辑器的工具栏，可以自行定义，删减，可参考已存在工具栏

FCKConfig.EnterMode = 'p'; // 编辑器中直接回车，在代码中生成，可选为p | div | br

FCKConfig.ShiftEnterMode = 'br'; // 编辑器中Shift 回车，在代码中生成，可选为p | div | br

FCKConfig.ContextMenu = 字符串数组; // 右键菜单的内容

FCKConfig.FontColors = ""; // 文字颜色列表

FCKConfig.FontNames = ""; // 字体列表

FCKConfig.FontSizes = ""; // 字号列表

FCKConfig.FontFormats = ""; // 文字格式列表

FCKConfig.StylesXmlPath = ""; // CSS样式列表的XML文件的位置

FCKConfig.TemplatesXmlPath = ""; // 模版的XML文件位置

FCKConfig.SpellChecker = "ieSpell/Spellerpages"; // 拼写检查器

FCKConfig.IeSpellDownloadUrl = ""; // 下载拼写检查器的网址

FCKConfig.FullPage = true/false; // 是否允许编辑整个HTML文件，还是仅允许编辑BODY间的内容

var _FileBrowserLanguage = 'php' ; // asp | aspx | cfm | lasso | perl | php | py

var _QuickUploadLanguage = 'php' ;// asp | aspx | cfm | lasso | php[/code] //第一个是文件浏览器使用的语言，第二个快速上传使用的语言，改成你需要的

FCKConfig.LinkUploadAllowedExtensions = "" ; // empty for all

FCKConfig.LinkUploadDeniedExtensions =".(php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgi)$" //这是两个允许和拒绝上传的文件类型列表

FCKConfig.ImageBrowser = false ;//是否在插入图片功能里面启用服务器文件浏览功能

FCKConfigFCKConfig.ImageBrowserURL = FCKConfig.BasePath 'filemanager/browser/default/browser.html?Type=ImageConnector=connectors/' _FileBrowserLanguage '/connector.' _FileBrowserExtension ;

//Type=Image 表示文件类型是image这会使文件浏览器定位到文件上传路径/image/文件夹下面

FCKConfig.FlashBrowser = false ;//是否在插入flash功能中启用服务器文件浏览功能

FCKConfig.LinkUpload = false ;//是否启用插入链接的快速上传功能

FCKConfig.ImageUpload = false ;//是否启用图片快速上传功能

FCKConfig.FlashUpload = false ;//是否启用flash上传功能

FCKConfigFCKConfig.SmileyPath = FCKConfig.BasePath 'images/smiley/msn/'; // 表情文件存放路径

FCKConfig.SmileyImages = ''; // 表情文件名称列表，具体参考默认设置

FCKConfig.SmileyColumns = 8; // 表情窗口显示表情列数

FCKConfig.SmileyWindowWidth = 320; // 表情窗口显示宽度，此窗口会因为表情文件的改变而作调整

FCKConfig.SmileyWindowHeight = 240; // 表情窗口显示高度，此窗口会因为表情文件的改变而作调整

常用自定义配置样例

修改语言

Js代码

FCKConfig.AutoDetectLanguage = false ;

FCKConfig.DefaultLanguage = 'zh-cn' ;

添加中文字体

Js代码

FCKConfig.FontNames = '宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;

更换换行模式

Js代码

FCKConfig.EnterMode = 'br' ; // p | div | br

FCKConfig.ShiftEnterMode = 'p' ; // p | div | br

自定义表情

Js代码

FCKConfig.SmileyPath = FCKConfig.BasePath + 'images/ftl/' ;

FCKConfig.SmileyImages =['01.gif','02.gif','03.gif','04.gif','05.gif','06.gif','07.gif','08.gif','09.gif','10.gif','11.gif','12.gif','13.gif','14.gif','15.gif','16.gif','17.gif','18.gif','19.gif','20.gif','21.gif'] ;

FCKConfig.SmileyColumns = 8 ;

FCKConfig.SmileyWindowWidth = 480 ;

FCKConfig.SmileyWindowHeight = 180 ;

如果表情图片太多，可以设置滚动条

1.在fckeditor/editor/dialog/fck_smiley.html 中找到

Js代码

window.onload = function ()

{

oEditor.FCKLanguageManager.TranslatePage(document) ;

dialog.SetAutoSize( true ) ;

}

将dialog.SetAutoSize( true ) 改为dialog.SetAutoSize( false)

2.再找到

Html代码

<body>

将 hidden改为auto

更换皮肤

Js代码

FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/office2003/' ;

fckeditor默认提供三种皮肤，如果想得到更多皮肤请访问:

自定义工具集

fckeditor提供两种工具集Default/Basic,也可以自己定义

Js代码

FCKConfig.ToolbarSets["MYTOOLBAR"] = [

['Source','-','FitWindow','-','Preview'],

['Undo','Redo'],

['Link','Unlink','Anchor'],

['Image','Flash','Table','Rule','Smiley','SpecialChar'],

['JustifyLeft','JustifyCenter','JustifyRight'],

['About'],

'/',

['Bold','Italic','Underline'],

['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote'],

['FontName','FontSize'],

['TextColor','BGColor']

] ;

在页面调用,要显示设置FCKeditor对象的ToolbarSet属性

Java代码

var oFCKeditor = new FCKeditor( 'MyTextarea' ) ;

oFCKeditor.BasePath = "fckeditor/" ;

oFCKeditor.Config["CustomConfigurationsPath"] ='myfckconfig.js ' ;

oFCKeditor.ToolbarSet="MYTOOLBAR";

oFCKeditor.Create();

fckeditor - (4)文件上传

fckeditor默认不支持文件上传，需要下载web服务器端程序（fckeditor.java），并进行配置

1.在web.xml中加入ConnectorServlet的配置信息

Xml代码

<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>

2.在classpath路径上创建fckeditor.properties(在src文件夹下创建)

Java代码

connector.userActionImpl=net.fckeditor.requestcycle.impl.UserActionImpl

乱码问题

由于fckeditor未考虑中文乱码问题，所以需要对ConnectorServlet做修改

解决fckeditor创建文件夹中文乱码问题

在ConnectorServlet的doGet方法中找到String newFolderStr = UtilsFile.sanitizeFolderName(newFolderName);这行代码，在其上添加如下2行代码。

Java代码

//NewFolderName为新创建的文件夹名称，先用iso-8859-1编码将字符串还原成字节数组，在用utf-8重新编码

String newFolderName = request.getParameter("NewFolderName");

newFolderName = new String(newFolderName.getBytes("iso-8859-1"), "utf-8");

String newFolderStr = UtilsFile.sanitizeFolderName(newFolderName);

解决上传文件名为中文文件时出现乱码

fckeditor 在java平台采用的是commons-upload组件进行文件上传，只要修改ServletFileUpload的headerEncoding属性为utf-8就能解决上传文件名是中文时所出现的乱码问题。在ConnectorServlet的doPost方法中找到 ServletFileUpload upload = new ServletFileUpload(factory);在其后加入下面代码

Java代码

FileItemFactory factory = new DiskFileItemFactory();

ServletFileUpload upload = new ServletFileUpload(factory);

//解决上传文件名为中文名时出现乱码

upload.setHeaderEncoding("utf-8");

中文图片不能引用

修改server.xml 端口为8080的Connector，添加属性URIEncoding="UTF-8"

Xml代码

<Connector port="8080" maxHttpHeaderSize="8192"

maxThreads="150" minSpareThreads="25" maxSpareThreads="75"

enableLookups="false" redirectPort="8443" acceptCount="100"

connectionTimeout="20000" disableUploadTimeout="true" URIEncoding="UTF-8" />

解决上传文件名重名问题

上传文件名用uuid随机生成的32位字符串代替，防止文件名重复

Java代码

String filename = FilenameUtils.getName(rawName);

String baseName = FilenameUtils.removeExtension(filename);

String extension = FilenameUtils.getExtension(filename);

//上传文件名用uuid随机生成的32位字符串代替，防止文件名重复

filename=UUID.randomUUID().toString().replace("-", "")+"."+extension;

控制允许上传文件的文件类型

fckeditor把上传的文件分为四种：file，Image，Flash，Media

fckeditor会对上传文件的类型进行两次验证（前台javascript验证和后台java验证）所以需要对myconfig.js和fckeditor.propertise进行配置

例如：限制上传图片格式为gif和png

在myconfig.js增加下面配置（可参看fckconfig.js的具体配置选项）

Js代码

FCKConfig.ImageUploadAllowedExtensions = ".(gif|png)$" ;

在fckeditor.propertise进行配置（可参看）

Java代码

connector.resourceType.image.extensions.allowed=gif|png

控制允许上传文件的文件大小

1. 在服务端的servlet中，在保存文件之前先判断一下文件大小，如果超出限制，就传递一个自定义的错误码，并且不再保存文件,在 ConnectorServlet的doPost方法中找到if (!ExtensionsHandler.isAllowed(resourceType, extension))

在后面添加else if语句块

Java代码

//如果文件的扩展名不允许上传

if (!ExtensionsHandler.isAllowed(resourceType, extension))

ur = new UploadResponse(UploadResponse.SC_INVALID_EXTENSION);

//如果文件大小超出限制10k

else if(uplFile.getSize()>10*1024){

//传递一个自定义的错误码

ur = new UploadResponse(204);

}

//如果不存在以上错误，则保存文件

else {

...

}

2.修改对应的页面中的回调函数，增加对这个自定义的错误码的处理

找到fckeditor/editor/filemanager/browser/default/frmupload.html和fckeditor /editor/dialog/fck_image/fck_image.js中的OnUploadCompleted方法，

在switch 语句块中添加如下代码

Js代码

case 204 :

alert( '文件太大' ) ;

break ;

本文转自农夫山泉别墅博客园博客，原文链接：http://www.cnblogs.com/yaowen/p/3712109.html，如需转载请自行联系原作者