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

CKeditor的使用,第一讲 在线编辑器,孙利 QQ:385956900 TelEmail:,一、什么是FCKeditor,FCKeditor是一个专门使用在网页上的在线编辑器，属于开放源代码的所见即所得文字编辑器，可以让web程序拥有如MS Word这样强大的编辑功能。它志于轻量化，不需要太复杂的安装步骤即可使用。它可和PHP、JavaScript、ASP、ASP.NET、ColdFusion、Java、以及ABAP等不同的编程语言相结合。“FCKeditor”名称中的“FCK” 是这个编辑器的作者的名字Frederico Caldeira Knabben的缩写（ 弗雷德里科.卡尔代拉.克拉本）现已更名为CKeditor。 CKeditor 相容于绝大部分的网页浏览器，像是 : Internet Explorer 5.5+ (Windows)、Mozilla Firefox 1.0+、Mozilla 1.3+ 和 Netscape 7+。在未来的版本也将会加入对 Opera 的支援。 CKeditor并不支持文件和图片上传，需要CKfinder插件的支持。 网站新闻添加和编辑时要用到CKeditor。,在线编辑器,二、得到CKeditor所需要的资源,a) ckeditor_3.6.2 （解压） /CKEditor/CKEditor/CKEditor%203.6.2/ckeditor_3.6.2.zip b) ckeditor-java-3.6.2 （解压） /CKEditor/CKEditor%20for%20Java/CKEditor%20for%20Java%203.6.2/ckeditor-java-3.6.2.war c) ckfinder_java_2.1 （解压） /CKFinder/CKFinder%20for%20Java/2.1/ckfinder_java_2.1.zip,三、使用步骤,1、MyEclipse新建 Web Project ： CKEditor_Finder 2、 解压ckfinder_java_2.1得到CKFinderJava.war并再次解压CKFinderJava.war得到CKFinderJavackfinder 文件夹，把ckfinder文件夹复制到WebRoot 下面，然后删除ckfinder文件夹中以下划线开头的文件夹。 CKFinderJavackfinder 3、解压ckeditor_3.6.2得到ckeditor_3.6.2ckeditor，并复制ckeditor文件夹到WebRoot 下面： ckeditor_3.6.2/ckeditor,三、使用步骤,4、 复制 CKFinder配置文件到工程项目的WEB-INF下面： ckfinderCKFinderJavaWEB-INFconfig.xml 5、复制ckfinderCKFinderJavaWEB-INFlib下面文件夹下面所有jar 文件到项目的WEB-INF/lib 下面： ckfinderCKFinderJavaWEB-INFlib 6、解压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.txt 8、 修改的配置文件config.xml ，把文件中的第二、第四行改为： true /CKEditor_Finder/userfiles/,三、使用步骤,三、使用步骤,9、在web.xml 中增加如下代码 ConnectorServlet com.ckfinder.connector.ConnectorServlet XMLConfig /WEB-INF/config.xml debug false 1 , ConnectorServlet /ckfinder/core/connector/java/connector.java FileUploadFilter com.ckfinder.connector.FileUploadFilter sessionCookieName JSESSIONID sessionParameterName jsessionid FileUploadFilter /ckfinder/core/connector/java/connector.java 10 ,三、使用步骤,三、使用步骤,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.js Ckfinder.js 文件的修改： 1. CKEditer/co