FCKeditor的配置与使用
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);" onclick="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 ;?
