FCKeditor学习笔记.doc

传智播客fckeditor学习笔记教师：汤阳光1_演示使用了FCKeditor的论坛(1) 官方网站：(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-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的Project 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) 通过JavaScript调用,可以参考附带的例子或者文档:例子可以在_samples/default.Html中右键查看源代码，文档可以看Integration下的JavaScript。(5) 新建test1.html，测试第1种方法。引入js文件后，拷贝文档中的代码时注意：oFCKeditor.BasePath = /fckeditor/;其中/fckeditor/ 指的是 http:/localhost:8080/fckeditor/，应修改为http:/localhost:8080/test/fckeditor/ ,因此修改该句为oFCKeditor.BasePath = /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一定要正确设置，一定要以/结尾(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.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个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下，考入了另一个关于日志的jar包，redeploy(9) 注意value属性不能不指定或者为空字符串，必须指定值，可以为一个空格5_配置_使用配置文件(1) 配置可以参看文档docs下的FCKeditor 2.xDevelopers Guide Configurationconfiguration file(2) 文档指出，在fckedior文件夹下存在fckconfig.js文件，修改配置可以直接修改这个文件，但是一般不采取这个方法，文档说明可以采用一个额外的配置文件对默认配置进行覆盖(3) 在fckeditor文件夹之外（便于升级）新建自己的js配置文件。覆盖部分属性，比如：FCKConfig.AutoDetectLanguage = false ;FCKConfig.DefaultLanguage = zh ;(4) 然后说明自己的配置文件的位置，根据文档有两种方法：1是在fckconfig.js中说明，但这样修改了原来的文件。第一个斜线代表当前站点的路径，因此需要在文件名前加上/站点名。FCKConfig.CustomConfigurationsPath = /test/myconfig.js ;2是在页面中说明var oFCKeditor = new FCKeditor( FCKeditor1 ) ;oFCKeditor.ConfigCustomConfigurationsPath = /myconfig.js ;oFCKeditor.Create() ;(5) 小结：(6) 注意事项：6_配置_一般需要修改的配置(1) 自定义ToolbarSet，去掉一些功能(2) 默认字体较少，仅几种英文字体，需要增加(3) 默认回车是分段，需要修改为仅换行(4) 修改编辑区样式文件(5) 更换表情图片(6) 参考资料：docs FCKeditor 2.xDevelopers GuideConfigurationConfiguration Options(7) 可以看到fckconfig.js中的FCKConfig.ToolbarSetsDefault和FCKConfig.ToolbarSetsBasic分别定义了工具栏。根据文档，”中为功能模块， 可以用于分成不同的区，- 用于增加 |间隔符，/用于换行(8) 在myconfig.js中复制FCKConfig.ToolbarSetsDefault的内容，修改名称为”itcastbbs”,和功能项；然后在javascript中（javascript的第二种方式）设定oFCKeditor.ToolbarSet=” itcastbbs”(注意要指定配置文件，否则报错)。注意，如果以jsp标签的形式改变ToolbarSet，应在标签中用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表示换行，div进行相应的修改(11) 修改编辑区样式文件：FCKConfig.EditorAreaCSS = FCKConfig.BasePath + css/fck_editorarea.css ;这里的FCKConfig.BasePath不同于页面上的oFCKeditor.BasePath属性，使用alert()方法输出该属性的值，来进行相应的修改。可以看到值是项目路径下的fckeditor/editor/文件夹，可以找到相应的样式文件进行修改7_配置_更换表情图片(1) 与表情文件相关的配置项：FCKConfig.SmileyPath= FCKConfig.BasePath + 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.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) 仅增加表情图片可以复制图片到SmileyPath文件夹，再在SmileyImages中增加改该文件名，还可以新建文件夹放入一套图片，然后指定SmileyPath为该文件夹(3) 当图片太多时，会发现窗口放不完，调整了宽度和高度参数仍不能正确处理，在窗口上右击查看属性，可以看到源文件fckeditor/editor/dialog/fck_smily.html，修改dialog.SetAutoSize( true )为false，可以停止自动设置大小而采用设置的宽和高；同时，根据，查看css中文手册（苏昱）中overflow属性，修改hidden为auto，这时可以完全合理。但是在firefox下测试无效?(4) Fckeditor文件夹的位置为FCKconfig.EditorPath, Fckeditor/editor文件夹的位置为FCKconfig.BasePath。通过把自定义的文件夹拷贝到这两个目录下，避免写死项目发布的路径（test）(5) 注意事项：8_文件上传_基本使用(1) 要实现文件上传，需要配置服务器端程序。查看FCKeditor java的文档，查看connector(2) 根据文档分两步配置，配置servlet：复制代码到web.xml中；建立perties，加入语句：connector.userActionImpl=net.fckeditor.requestcycle.impl.UserActionImpl(3) Redeploy(4) 这时两种方式都可以成功：”图象浏览服务器上传” 或者 “上传”9_文件上传_问题一_上传中文名的文件会出现乱码(1) 上传后对话框显示的文件名为乱码，为了确认是文件名保存为了乱码还是显示为乱码，打开项目的文件夹位置，找到userfiles/image/，发现文件在服务器端保存出现了乱码(2) 分析可能的环节有二：post方式发送时，以页面的编码方式编码，如果该方式不支持中文则可能出现乱码；如果发送的编码正确，而是在服务器端处理时没有以正确的方式进行解码(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.parseRequest(request);在该语句之前应该对request设置正确的编码方式。由于无法在此处修改源代码，所以新建了自己的类cn.itcast.bbs.fckeditor.ConnectorServlet，复制并粘贴net.fckeditor.connector.ConnectorServlet所有的代码过来，修改web.xml下的servlet的配置为这个类。然后修改其代码：在try之前，加入: upload.setHeaderEncoding(UTF-8);(5) 除了以上方式，发现使用request.setCharacterEncoding(UTF-8);也可以实现中文名的正确处理，但是两种方式下，在firefox中都没有显示出现图片。10_文件上传_问题二_创建中文名的目录时会出现乱码(1) 上传文件时如果创建中文的文件夹时会出现乱码(2) 同样检查两个地方：客户端是否正确编码，服务器端是否正确解码(3) 在create new folder 处点右键查看属性，可以看出源文件为fckeditor/editor/filemanager/borwser/default/frmcreatefolder.html，在文件中看到没有form，然后从CreateFolder()展开，oConnector对象是在上一页面定义，在create new folder 上方点右键查看属性，可以看到包含的上一级文件是fckeditor/editor/filemanager/borwser/default/frmcreatefolder.html，加入alert语句用于输出surl的值，可以看到在点击create new folder 并输入文件夹的名字点击确定之后，弹出surl的值，符合web.xml配置的servlet的地址。同时，可以看到，中文的文件名是用url编码，是正确的方式。并且可以看出是以get方式提交的。(4) 因此看servlet的doGet方法，找到了获取newFolderStr的位置，看出未对编码进行中文处理，因此修改为：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) 原理:查看添加到文本框中的图片的源码，可以看到：图片的地址为： /test/userfiles/image/abc/%E4%B8%AD%E6%96%87.JPG ，如果在服务器端没有设置，那么地址将解析为乱码，无法找到对应的图片(4) 但是此方法不宜使用，应为会造成request.getParameter取不到正确的参数，同时这时再创建中文的文件夹又会是乱码(5) 还原修改，不使用该方法(6) 第二种方法，修改代码，不使用中文名字进行保存。加入使用UUID来保存文件名的语句：12_文件上传_控制允许上传的文件类型(1) 允许上传的文件类型：file、flash、image、media (2) 可以通过上传4种类型的文件，或者通过上传图片，或者通过上传flash文件(3) 不同类型的文件放在分别放在 userfiles下对应的文件夹中，如果选择了上传的类型，但是没有上传对应类型的文件，将会报错(4) 针对每一种分类，都可以设置允许上传的文件的扩展名，以保证安全性。(5) 查看fckeditor java 文档，configuration项，connector的配置(6) 可以指定禁止的项的列表或者允许的列表，但不能同时使用，默认是使用允许的的列表(7) 在net.fckeditor.handlers包下有perties文件(8) 客户端配置和服务器端配置：(9) 修改服务器端的配置，指classpath下的perties文件中的配置：拷贝相应的配置项到文件中，并进行修改(10) 修改客户端的配置：指自定义的myconfig.js文件，对照fckconfig.js进行修改13_文件上传_控制上传的文件的大小(1) 基本的控制流程和修改点(2) 打开修改过的ConnectorServlet，查看doPost方法，添加注释(3) 添加一个判断分支，当文件大小超过一个值（演示中直接写死，可以写成一个常量），传递一个错误信息数值(4) 查看已经定义了哪些错误码数值，可以查看上传文件的属性，可以看到是 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) 测试，在“上传”页面将不能再上传超限文件，并传回中文提示：而在“图像”页面也不成功，但是传回的文字是英文:原因：使用的是同一个Servlet但不同的html及js文件。因此没有使用中文提示信息(7) 再次修改“图像”页面的回调函数。右击查看到页面是 fckeditor/editor/filemanager/browser/default/frmupload.html，同样修改(8) 看到frmupload.html中的处理函数的参数列表和 fck_image.js 不同，所有要找通用的方法（即在servlet中传递4个参数的方式可能不行？）(9) 可以通过修改 fck_image.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, 文件过大，不应超过 + Constants.File_Max_Size + M);(11) 通过调试发现，在上一集中的试验不成功是因为 ConnectorServlet中的UtilsFile.isImage(uplFile.getInputStream() 要进行是否是image的判断，所以新建的空白文件修改后缀名后虽然符合了名称，但是判断不是image，所以提示错误。判断需要 ImageInfo 的check()方法，只对gif、bpm等文件的inputstream进行检查，所以必须在这些类型内的文件才行,否则检查不通过。(12) 通过修改ConnectorServlet的代码，成功传送也可以不用修改 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) 在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中的ConnectorServlet的配置代码Connectorcn.itcast.bbs.ConnectorServlet1Connector/fckeditor/editor/filemanager/connectors/*(5) 拷贝容纳ConnectorServlet的包到论坛项目(6) 拷贝粘贴配置文件：perties (7) 对于配置文件在外部的，需要拷贝粘贴配置文件：myconfig.js (8) 需要修改表情图片的，要拷贝表情图片文件夹(9) 修改了web.xml，项目会重新部署(10) 帖子以前是用的struts的，以方式二引入FCKeditor(11) 在下方，引入fckeditor.js。注意不应使用相对路径，而要写成$pageContext