在线编辑器ppt(详解).ppt

CKeditor的使用,第一讲在线编辑器,孙利QQ:385956900Telmail:sunli0396,一、什么是FCKeditor,FCKeditor是一个专门使用在网页上的在线编辑器，属于开放源代码的所见即所得文字编辑器，可以让web程序拥有如MSWord这样强大的编辑功能。它志于轻量化，不需要太复杂的安装步骤即可使用。它可和PHP、JavaScript、ASP、ASP.NET、ColdFusion、Java、以及ABAP等不同的编程语言相结合。“FCKeditor”名称中的“FCK”是这个编辑器的作者的名字FredericoCaldeiraKnabben的缩写（弗雷德里科.卡尔代拉.克拉本）现已更名为CKeditor。CKeditor相容于绝大部分的网页浏览器，像是:InternetExplorer5.5+(Windows)、MozillaFirefox1.0+、Mozilla1.3+和Netscape7+。在未来的版本也将会加入对Opera的支援。CKeditor并不支持文件和图片上传，需要CKfinder插件的支持。网站新闻添加和编辑时要用到CKeditor。,在线编辑器,二、得到CKeditor所需要的资源,a)ckeditor_3.6.2（解压）ckeditor-java-3.6.2（解压）ckfinder_java_2.1（解压）,三、使用步骤,1、MyEclipse新建WebProject：CKEditor_Finder2、解压ckfinder_java_2.1得到CKFinderJava.war并再次解压CKFinderJava.war得到CKFinderJavackfinder文件夹，把ckfinder文件夹复制到WebRoot下面，然后删除ckfinder文件夹中以下划线开头的文件夹。CKFinderJavackfinder3、解压ckeditor_3.6.2得到ckeditor_3.6.2ckeditor，并复制ckeditor文件夹到WebRoot下面：ckeditor_3.6.2/ckeditor,三、使用步骤,4、复制CKFinder配置文件到工程项目的WEB-INF下面：ckfinderCKFinderJavaWEB-INFconfig.xml5、复制ckfinderCKFinderJavaWEB-INFlib下面文件夹下面所有jar文件到项目的WEB-INF/lib下面：ckfinderCKFinderJavaWEB-INFlib6、解压ckeditor-java-3.6.2并复制ckeditor-java-3.6.2.warWEB-INFlib下面的文件ckeditor-java-core-3.5.3.jar到项目的WEB-INF/lib下面：ckeditor-java-3.6.2.warWEB-INFlib,7、删除无用的文件：首先是ckeditor下面的文件：_sample,_source,CHANGES.html，ckeditor_php4.php，ckeditor_php5.php,ckeditor.asp,ckeditor.pack,INSTALL.html,LICENSE.html然后是ckfinder下面的文件：_samples,help,changelog.txt,install.txt,license.txt,translation.txt8、修改的配置文件config.xml，把文件中的第二、第四行改为：true/CKEditor_Finder/userfiles/,三、使用步骤,三、使用步骤,9、在web.xml中增加如下代码ConnectorServletcom.ckfinder.connector.ConnectorServletXMLConfig/WEB-INF/config.xmldebugfalse1,ConnectorServlet/ckfinder/core/connector/java/connector.javaFileUploadFiltercom.ckfinder.connector.FileUploadFiltersessionCookieNameJSESSIONIDsessionParameterNamejsessionidFileUploadFilter/ckfinder/core/connector/java/connector.java10,三、使用步骤,三、使用步骤,10、修改ckeditor/config.js文件的内容（本质整合ckeditor和ckfinder）用下面的内容覆盖源文件的全部内容：,CKEDITOR.editorConfig=function(config)config.filebrowserBrowseUrl=/CKEditor_Finder/ckfinder/ckfinder.html;config.filebrowserImageBrowseUrl=/CKEditor_Finder/ckfinder/ckfinder.html?type=Images;config.filebrowserFlashBrowseUrl=/CKEditor_Finder/ckfinder/ckfinder.html?type=Flash;config.filebrowserUploadUrl=/ckfinder/core/connector/java/connector.java?command=QuickUpload,三、使用步骤,11、编写Index.jsp实现编辑器的使用：在index.jsp文件头添加如下代码：在index.jsp的中添加如下代码：12、编写ShowData.jsp显示数据显示数据,四、关于破解,替换预览图片方框的文字为：预览图片的位置。要替换的文件的位置：/CKEditor_Finder/WebRoot/ckeditor/plugins/image/dialogs/image.jsCkfinder.js文件的修改：1.CKEditer/config.js文