1、传智播客 fckeditor 学习笔记教师：汤阳光1_演示使用了 FCKeditor 的论坛(1) 官方网站：http:/(2) 所见即所得的编辑器2_资料下载及介绍(1) 查看当前版本，查看 demo，docs(2) 进入 download，需要下载 FCKeditor_2.6.3.zip，这是用 javascript 编写在客户端使用的，如果需要使用服务器端功能，如文件上传，需要下载 FCKeditor.Java：可以下载 fckeditor-java-2.4.1-bin.zip ,源文件包：fckeditor-java-2.4.1-src.zip，以及演示：fckeditor-java-
2、demo-2.4.1.war (3) 解压 FCKeditor_2.6.3.zip 和 fckeditor-java-2.4.1-bin.zip，在 FCKeditor_2.6.3 文件夹下提供了例子：_samplesdefault.htm，可以右键查看源文件以参考使用方法；在 fckeditor-java-2.4.1-bin 解压后的文件夹中的 site/index.html 为文档；可以复制 fckeditor-java-demo-2.4.1.war 到 tomcat 下，打开例子程序，此时查看源代码应该进入 jsp 目录下查看相应的 jsp 文件(4) 可以通过 Eclipse 的 Pr
3、oject Deployments 窗口、点中某个已经部署的项目，点击 Borwse 来打开对应的部署目录3_安装与通过 JavaScript 调用 FCKeditor 的两种方法(1) 新建 java web 工程 test，同时打开网站文档： Developers Guide(2) 查看 Installation，把 fckeditor-java-2.4.1-bin.jar 解压后的文件夹中的 fckeditor 文件夹拷贝到工程的 webroot 文件夹下(3) Fckeditor 的调用方式有两种：通过 JavaScript 调用，或者在 jsp 中通过自定义标签调用(4) 通过 Ja
4、vaScript 调用,可以参考附带的例子或者文档: 例子可以在 _samples/default.Html 中右键查看源代码，文档可以看 Integration 下的 JavaScript。(5) 新建 test1.html，测试第 1 种方法。引入 js 文件后，拷贝文档中的代码时注意：oFCKeditor.BasePath = “/fckeditor/“;其中/fckeditor/ 指的是 http:/localhost:8080/fckeditor/，应修改为 http:/localhost:8080/test/fckeditor/ ,因此修改该句为 oFCKeditor.BasePa
5、th = “/test/fckeditor/“;或者也可以使用相对路径，oFCKeditor.BasePath = “fckeditor/“;另外“/test/fckeditor/“一定要以斜线结尾，否则出错(6) 新建 test2.html，测试第 2 种方法.引入 js 文件后，拷贝文档中的代码,同样修改oFCKeditor.BasePath 语句，引入 this is the default,要求 name 或者 id 属性与 var oFCKeditor = new FCKeditor( MyTextarea ) 中指定的名字一致(7) 结论：BasePath 一定要正确设置，一定要以
6、 “/“结尾(8) FCKeditor 属性：(9) 通过设置这些属性，在 test1.Html 中进行测试(10)var FCKeditor = function( instanceName, width, height, toolbarSet, value )，instanceName 是为编辑器输出的 textarea 元素的 name 属性的值，必须指定；其他各参数可以指定或不指定，指定则会赋值给同名属性4_在 jsp 中通过自定义标签调用 FCKeditor(1) 在 jsp 中通过自定义标签调用 FCKeditor(2) 两个地方可以参考：fckeditor-java-demo-2
7、.4.1.war ，以及文档 :fckeditor-java-2.4.1-bin 解压后的文件夹中的 site/index.html 为文档，看 Reference 下的 taglib(3) 注意不要用鼠标点右键方式查看源码，要直接看 jsp 文件(4) 建立 editor.jsp，拷贝 jar 包到 web-inflib 下:fckeditor-java-2.4.1-binfckeditor-java-2.4.1fckeditor-java-core-2.4.1.jar，以及 fckeditor-java-2.4.1-binfckeditor-java-2.4.1lib 文件夹下的 3 个
8、jar 包：commons-fileupload-1.2.1.jar、commons-io-1.3.2.jar 文件上传用，slf4j-api-1.5.2.jar 日志用(5) Tld 文件已经在 fckeditor-java-core-2.4.1.jarMETA-INF FCKeditor.tld，不用拷贝(6) Jsp 文件中引入 tld 文件(7) 写标签，必须要instanceName，各种属性与 javascript 中的含义一致，BasePath 需要以”/”开头，代表工程根目录(8) 访问有异常，少了 jar 包，来到演示工程的 web-inf/lib 下，考入了另一个关于日志的
9、 jar 包，redeploy(9) 注意 value 属性不能不指定或者为空字符串，必须指定值，可以为一个空格5_配置_使用配置文件(1) 配置可以参看文档 docs 下的 FCKeditor 2.xDevelopers Guide Configurationconfiguration file(2) 文档指出，在 fckedior 文件夹下存在 fckconfig.js 文件，修改配置可以直接修改这个文件，但是一般不采取这个方法，文档说明可以采用一个额外的配置文件对默认配置进行覆盖(3) 在 fckeditor 文件夹之外（便于升级）新建自己的 js 配置文件。覆盖部分属性，比如：FCKC
10、onfig.AutoDetectLanguage = false ;FCKConfig.DefaultLanguage = “ zh “ ;(4) 然后说明自己的配置文件的位置，根据文档有两种方法：1 是在 fckconfig.js 中说明，但这样修改了原来的文件。第一个斜线代表当前站点的路径，因此需要在文件名前加上/站点名。FCKConfig.CustomConfigurationsPath = /test/myconfig.js ;2 是在页面中说明var oFCKeditor = new FCKeditor( “FCKeditor1“ ) ;oFCKeditor.Config“Custo
11、mConfigurationsPath“ = “/myconfig.js“ ;oFCKeditor.Create() ;(5) 小结：(6) 注意事项：6_配置_一般需要修改的配置(1) 自定义 ToolbarSet，去掉一些功能(2) 默认字体较少，仅几种英文字体，需要增加(3) 默认回车是分段，需要修改为仅换行(4) 修改编辑区样式文件(5) 更换表情图片(6) 参考资料：docs FCKeditor 2.xDevelopers GuideConfigurationConfiguration Options(7) 可以看到 fckconfig.js 中的 FCKConfig.Toolbar
12、Sets“Default“和 FCKConfig.ToolbarSets“Basic“分别定义了工具栏。根据文档， ”中为功能模块， 可以用于分成不同的区， - 用于增加 |间隔符， /用于换行(8) 在 myconfig.js 中复制 FCKConfig.ToolbarSets“Default“的内容，修改名称为”itcastbbs”,和功能项；然后在 javascript 中（ javascript 的第二种方式）设定 oFCKeditor.ToolbarSet=” itcastbbs”(注意要指定配置文件，否则报错) 。注意，如果以 jsp 标签的形式改变ToolbarSet，应在标签中
13、用 toolbarSet 属性指定，而不是在 中设置(9) 修改增加字体：FCKConfig.FontNames = 宋体;楷体_GB2312;黑体;隶书;Times New Roman;Arial;保存报错，因为默认是 ISO-8859-1，需要右击该 js 文件 属性 resourceText file encoding 下的 other 修改为 UTF-8(10)修改回车和 shift+回车的模式：FCKConfig.EnterMode = p ; / p | div | brFCKConfig.ShiftEnterMode = br ; / p | div | brp表示段落， br表
14、示换行， div进行相应的修改(11)修改编辑区样式文件：FCKConfig.EditorAreaCSS = FCKConfig.BasePath + css/fck_editorarea.css ;这里的 FCKConfig.BasePath 不同于页面上的 oFCKeditor.BasePath 属性，使用 alert()方法输出该属性的值，来进行相应的修改。可以看到值是项目路径下的 fckeditor/editor/文件夹，可以找到相应的样式文件进行修改7_配置_更换表情图片(1) 与表情文件相关的配置项：FCKConfig.SmileyPath = FCKConfig.BasePath
15、 + 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
16、.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 ;SmileyPath 是指表情图片的文件夹位置SmileyImages 是表情中的文件名SmileyColumns 是每行的文件数SmileyWindowWidth 和 SmileyWindowHeight 是表情窗口的宽和高(2
17、) 仅增加表情图片可以复制图片到 SmileyPath文件夹，再在 SmileyImages 中增加改该文件名，还可以新建文件夹放入一套图片，然后指定 SmileyPath 为该文件夹(3) 当图片太多时，会发现窗口放不完，调整了宽度和高度参数仍不能正确处理，在窗口上右击查看属性，可以看到源文件 fckeditor/editor/dialog/fck_smily.html，修改dialog.SetAutoSize( true )为 false，可以停止自动设置大小而采用设置的宽和高；同时，根据，查看 css 中文手册（苏昱）中overflow 属性，修改 hidden 为 auto，这时可以完
18、全合理。但是在 firefox 下测试无效?(4) Fckeditor 文件夹的位置为 FCKconfig.EditorPath, Fckeditor/editor 文件夹的位置为FCKconfig.BasePath。通过把自定义的文件夹拷贝到这两个目录下，避免写死项目发布的路径（test ）(5) 注意事项：8_文件上传_基本使用(1) 要实现文件上传，需要配置服务器端程序。查看 FCKeditor java 的文档，查看 connector(2) 根据文档分两步配置，配置 servlet：复制代码到 web.xml 中；建立 fckeditor.properties，加入语句：connec
19、tor.userActionImpl=net.fckeditor.requestcycle.impl.UserActionImpl(3) Redeploy(4) 这时两种方式都可以成功：”图象浏览服务器上传” 或者 “上传”9_文件上传_问题一_上传中文名的文件会出现乱码(1) 上传后对话框显示的文件名为乱码，为了确认是文件名保存为了乱码还是显示为乱码，打开项目的文件夹位置，找到 userfiles/image/，发现文件在服务器端保存出现了乱码(2) 分析可能的环节有二：post 方式发送时，以页面的编码方式编码，如果该方式不支持中文则可能出现乱码；如果发送的编码正确，而是在服务器端处理时没
20、有以正确的方式进行解码(3) 在”图象浏览服务器上传”的页面右键查看信息(upload 框附近点击) ，可以看到源文件为 fckeditor/editor/filemanager/borwser/default/frmupload.html(IE 下查看，firefox 下不正确)，查看代码，可以看到编码方式为 utf-8，没有问题(4) 查看服务器端处理程序，查看 web.xml 中配置的 net.fckeditor.connector.ConnectorServlet 的代码，按 ctrl+O 查看内部成员，查看 dopost()方法，发现语句：List items = upload.pa
21、rseRequest(request);在该语句之前应该对 request 设置正确的编码方式。由于无法在此处修改源代码，所以新建了自己的类 cn.itcast.bbs.fckeditor.ConnectorServlet，复制并粘贴net.fckeditor.connector.ConnectorServlet 所有的代码过来，修改 web.xml 下的 servlet 的配置为这个类。然后修改其代码：在 try 之前，加入: upload.setHeaderEncoding(“UTF-8“);(5) 除了以上方式，发现使用 request.setCharacterEncoding(“UTF
22、-8“);也可以实现中文名的正确处理，但是两种方式下，在 firefox 中都没有显示出现图片。10_文件上传_问题二_ 创建中文名的目录时会出现乱码(1) 上传文件时如果创建中文的文件夹时会出现乱码(2) 同样检查两个地方：客户端是否正确编码，服务器端是否正确解码(3) 在 create new folder 处点右键查看属性，可以看出源文件为fckeditor/editor/filemanager/borwser/default/frmcreatefolder.html，在文件中看到没有form，然后从 CreateFolder()展开， oConnector 对象是在上一页面定义，在 c
23、reate new folder 上方点右键查看属性，可以看到包含的上一级文件是fckeditor/editor/filemanager/borwser/default/frmcreatefolder.html，加入 alert 语句用于输出surl 的值，可以看到在点击 create new folder 并输入文件夹的名字点击确定之后，弹出surl 的值，符合 web.xml 配置的 servlet 的地址。同时，可以看到，中文的文件名是用 url编码，是正确的方式。并且可以看出是以 get 方式提交的。(4) 因此看 servlet 的 doGet 方法，找到了获取 newFolderS
24、tr 的位置，看出未对编码进行中文处理，因此修改为：String tempStr = request.getParameter(“NewFolderName”);tempStr = new String(tempStr.getBytes(“ISO8859-1“), “Utf-8“);String newFolderName = UtilsFile.sanitizeFolderName(tempStr);11_文件上传_问题三_ 引用的中文名字的图片不能正常显示(1) 引用的中文名字的图片不能正常显示，需要修改 tomcat 连接器的配置(2) 修改 server.xml：(3) 原理: 查看添
25、加到文本框中的图片的源码，可以看到：图片的地址为： /test/userfiles/image/abc/%E4%B8%AD%E6%96%87.JPG ，如果在服务器端没有设置，那么地址将解析为乱码，无法找到对应的图片(4) 但是此方法不宜使用，应为会造成 request.getParameter 取不到正确的参数，同时这时再创建中文的文件夹又会是乱码(5) 还原修改，不使用该方法(6) 第二种方法，修改代码，不使用中文名字进行保存。加入使用 UUID 来保存文件名的语句：12_文件上传_控制允许上传的文件类型(1) 允许上传的文件类型：file、flash 、image 、media (2)
26、可以通过 上传 4 种类型的文件，或者通过 上传图片，或者通过 上传 flash 文件(3) 不同类型的文件放在分别放在 userfiles 下对应的文件夹中，如果选择了上传的类型，但是没有上传对应类型的文件，将会报错(4) 针对每一种分类，都可以设置允许上传的文件的扩展名，以保证安全性。(5) 查看 fckeditor java 文档，configuration 项，connector 的配置(6) 可以指定禁止的项的列表或者允许的列表，但不能同时使用，默认是使用允许的的列表(7) 在 net.fckeditor.handlers 包下有 default.properties 文件(8) 客
27、户端配置和服务器端配置：(9) 修改服务器端的配置，指 classpath 下的 fckeditor.properties 文件中的配置：拷贝相应的配置项到文件中，并进行修改(10)修改客户端的配置：指自定义的 myconfig.js 文件，对照 fckconfig.js 进行修改13_文件上传_控制上传的文件的大小(1) 基本的控制流程和修改点(2) 打开修改过的 ConnectorServlet，查看 doPost 方法，添加注释(3) 添加一个判断分支，当文件大小超过一个值（演示中直接写死，可以写成一个常量） ，传递一个错误信息数值(4) 查看已经定义了哪些错误码数值，可以查看上传文件的
28、属性，可以看到是 fckeditor/editor/dialog/fck_image.html，查看其代码，可以看到其引入了 js 文件：fckeditor/editor/dialog/fck_image/fck_image.js，查看其中的 OnUploadCompleted 方法，看到 204 未使用，在传递 204 错误代码（不过我看到 0 和 1 分别代表客户化的信息，应该可以直接使用）：ConnectorServlet:fck_image.js ：需要修改编码为 utf-8(5) 尝试刚才的猜测，利用自定义信息进行处理；插入断点调试，判断无法控制文件上传类型的原因(6) 测试，在“上
29、传”页面将不能再上传超限文件，并传回中文提示：而在“图像”页面也不成功，但是传回的文字是英文:原因：使用的是同一个 Servlet 但不同的 html 及 js 文件。因此没有使用中文提示信息(7) 再次修改“图像”页面的回调函数。右击查看到页面是 fckeditor/editor/filemanager/browser/default/frmupload.html，同样修改(8) 看到 frmupload.html 中的处理函数的参数列表和 fck_image.js 不同，所有要找通用的方法（即在 servlet 中传递 4 个参数的方式可能不行？）(9) 可以通过修改 fck_image.
30、js 及 frmupload.html，把文件上传成功等的提示信息改为中文(10)自己试验成功，可以以下面的方式修改 servlet 而不必添加 204 错误代码，也不必修改 fckeditor/editor/filemanager/browser/default/frmupload.html，可以修改 fck_image.js 以使得成功的传送时也以中文提示。else if (uplFile.getSize() Constants.File_Max_Size * 1024 * 1024) ur = new UploadResponse(1, null, null, “文件过大，不应超过 “+
31、 Constants.File_Max_Size + “ M“);(11) 通过调试发现，在上一集中的试验不成功是因为 ConnectorServlet 中的UtilsFile.isImage(uplFile.getInputStream() 要进行是否是 image 的判断，所以新建的空白文件修改后缀名后虽然符合了名称，但是判断不是 image，所以提示错误。判断需要 ImageInfo 的 check()方法，只对 gif、bpm 等文件的 inputstream 进行检查，所以必须在这些类型内的文件才行,否则检查不通过。(12) 通过修改 ConnectorServlet 的代码，成功传
32、送也可以不用修改 fck_image.js 及frmupload.html 文件的情况下可以实现中文化if (Utils.isEmpty(newFilename)ur = new UploadResponse(1,/ UploadResponse.SC_OK,UtilsResponse.constructResponseUrl(request,resourceType, currentFolderStr,true, ConnectorHandler.isFullUrl().concat(filename), null, “已成功上传文件！“);14_在表单中使用 FCKeditor (1) 在
33、 test1.htm 的 textarea 外面加上以及提交按钮(2) 新建 show.jsp，进行显示，使用 java 代码或 el 表达式：(3) 注意需要 request.setCharacerEncoding();保持和前一个页面的编码方式一致，避免中文乱码。15_应用到论坛中(1) 应用到已有的 itcastForum 论坛项目中。(2) 拷贝 fckeditor 文件夹到 webroot 下(3) 拷贝所需的 jar 包: 选中 web-inf/lib 后点击 图标打开 lib 文件夹，拷贝 5 个 jar 包到论坛项目(4) 拷贝 web.xml 中的 ConnectorServ
34、let 的配置代码Connectorcn.itcast.bbs.ConnectorServlet1Connector/fckeditor/editor/filemanager/connectors/*(5) 拷贝容纳 ConnectorServlet 的包到论坛项目(6) 拷贝粘贴配置文件：fckeditor.properties (7) 对于配置文件在外部的，需要拷贝粘贴配置文件：myconfig.js (8) 需要修改表情图片的，要拷贝表情图片文件夹(9) 修改了 web.xml，项目会重新部署(10)帖子以前是用的 struts 的 ，以方式二引入 FCKeditor(11)在下方，引入
35、 fckeditor.js。注意不应使用相对路径，而要写成“$pageContext.request.contextPath/fckeditor/fckeditor.js“，$pageContext.request.contextPath是应用程序路径(12)再写上方式二中的替换的那些代码，注意 BasePath 仍然需要使用 ”$pageContext.request.contextPath/fckeditor/”方式来指定路径(13)调整宽度和高度oFCKeditor.Width=“80%“;oFCKeditor.Height=“350“;(14)这时刷新页面已经可以显示(15)需要进行配
36、置(16)可以查看 fckconfig.js，得知编辑区的 Css 样式文件的位置为：(17)修改该文件，引入需要的样式文件，下面代码中的 bbs_style.css 已存在并使用的:import url(/css/bbs_style.css);(18)修改 myconfig.js，添加 itcastbbs 的 toolbarsets，定制功能：添加中文自体，修改了 “回车”和“shift+回车” ，更换了表情图标，设置了允许上传的图片的扩展名和大小(19)页面的 js 语句中添加:oFCKeditor.ToolbarSet=“itcastbbs“;(20)希望去掉上传文件中”浏览服务器”的功
37、能(21)在该页面右键属性看到文件为：fckeditor/editor/dialog/fck_image.html，找到“浏览服务器”按钮的部分FCKConfig.EditorAreaCSS = FCKConfig.BasePath + css/fck_editorarea.css ;(22)页面是支持多种语言的，看到的文件是英文的，我们看到的页面是中文的，可以ctrl+shift+R,查找语言文件 zh-cn.js(23)查“浏览服务器” ，看到 key 为 DlgBtnBrowseServer，对照 fck_image.html 中，看到该按钮的 fcklang=“DlgBtnBrowseServer“ ，注释掉该按钮。(24)查看页面，已经没有了“浏览服务器”按钮，用户只能通过“上传”进行简单上传。(25)也注释掉 和 中的“浏览服务器”按钮(26)修改页面文字和提示语：上传文件中的预览框中的说明文字，右击文字查看属性，文件为 fckeditor/editor/dialog/fck_image/fck_image_preview.html，打开文件，找到对应文字，删掉或者更换掉(27)自己试验发现，也可以用第三种方式用 java 标签引入标题1 : 內容1 :
