FCKeditor的配置与使用
fckeditor - (1)资料介绍与安装 fckeditor介绍 FCKeditor是一个专门使用在网页上属于开放源代码的所见即所得文字编辑器。 1.fckeditor官网：http://www.fckeditor.net/ 2.fckeditor下载：http://www.fckeditor.net/download FCKeditor_2.6.3
fckeditor - (1)资料介绍与安装
fckeditor介绍
FCKeditor是一个专门使用在网页上属于开放源代码的所见即所得文字编辑器。
1.fckeditor官网：http://www.fckeditor.net/
2.fckeditor下载：http://www.fckeditor.net/download
FCKeditor_2.6.3（客户端javascript主程序）http://nchc.dl.sourceforge.net/sourceforge/fckeditor/FCKeditor_2.6.3.zip
FCKeditor.Java（支持j2ee web平台服务器端程序）
fckeditor-java-2.4-bin.zip(执行文件)
http://nchc.dl.sourceforge.net/sourceforge/fckeditor/fckeditor-java-2.4-bin.zip
fckeditor-java-2.4-src.zip（源文件）
http://nchc.dl.sourceforge.net/sourceforge/fckeditor/fckeditor-java-2.4-src.zip
fckeditor-java-demo-2.4.war（样例）
http://nchc.dl.sourceforge.net/sourceforge/fckeditor/fckeditor-java-demo-2.4.war
3.fckeditor样例 http://www.fckeditor.net/demo/
demo1:默认fckeditor
demo2:多语言
demo3:自定义工具集
demo4:更换皮肤
4.fckeditor文档 http://docs.fckeditor.net/
开发者手册:http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide
使用者手册:http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide
安装
参考文档：http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide/Installation
试验环境:
MyEclipse6.0+Tomcat5.0+Mysql5.0
步骤:
1.在MyEclipse中新建一个web工程TestFckeditor
2.把FCKeditor_2.6.3解压后的生成的文件夹fckeditor拷贝到WebRoot下
3.检测安装是否成功访问http://127.0.0.1:8888/TestFckeditor/fckeditor/_samples/default.html
fckeditor - (2)集成
集成javascript步骤
参考文档：http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide/Integration/JavaScript
1.将JavaScript集成模块脚本放入<head>标签中
Html代码
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
2.创建fckeditor
方法一：（内联）
在<body>标签适当位置放入如下代码（通常放在标签中）
Html代码
<script>
var oFCKeditor = new FCKeditor('FCKeditor1');
oFCKeditor.BasePath = "fckeditor/";
oFCKeditor.Create();
</script>
方法二：（替代<textarea>）
在<head>标签中添加onload方法
Html代码
<script>
window.onload = function()
{
var oFCKeditor = new FCKeditor( 'MyTextarea' ) ;
oFCKeditor.BasePath = "fckeditor/" ;
oFCKeditor.ReplaceTextarea() ;
}
</script>
在<body>标签中添加以下代码
Html代码
<textarea id="MyTextarea" name="MyTextarea">
This is <b>the</b> initial value.
</textarea>
方法三：（动态生成）
在<head>标签中定义 createFckeditor()方法
Html代码
<script>
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>
<div id="myFCKeditorDiv"> </div>
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="http://java.fckeditor.net" prefix="FCK"%>
在<body>中加入自定义标签
Html代码
<FCK:editor instanceName="fck1" basePath="/fckeditor" value=" "></FCK:editor>
注意：basePath以"/"开头代表工程的根路径而非web服务器的根路径，一定要指定value属性，而且值不能为空字符串"",否则会抛NullPointException。
fckeditor - (3)配置
参看文档：http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide/Configuration/Configuration_File
自定义配置方法
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 style="overflow: hidden">
<body>
将 hidden改为auto
更换皮肤
Js代码
FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/office2003/' ;
fckeditor默认提供三种皮肤，如果想得到更多皮肤请访问:
http://sourceforge.net/tracker/?atid=740153&group_id=75348&func=browse
自定义工具集
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>
<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 ;
开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！
更多推荐
0
0- 0
已为社区贡献3条内容
所有评论(0)