在線編輯器ppt(詳解).ppt

CKeditor的使用,第一講在線編輯器,孫利QQ:385956900Telmail:sunli0396,一、什么是FCKeditor,FCKeditor是一個(gè)專門使用在網(wǎng)頁上的在線編輯器，屬于開放源代碼的所見即所得文字編輯器，可以讓web程序擁有如MSWord這樣強(qiáng)大的編輯功能。它志于輕量化，不需要太復(fù)雜的安裝步驟即可使用。它可和PHP、JavaScript、ASP、ASP.NET、ColdFusion、Java、以及ABAP等不同的編程語言相結(jié)合?！癋CKeditor”名稱中的“FCK”是這個(gè)編輯器的作者的名字FredericoCaldeiraKnabben的縮寫（弗雷德里科.卡爾代拉.克拉本）現(xiàn)已更名為CKeditor。CKeditor相容于絕大部分的網(wǎng)頁瀏覽器，像是:InternetExplorer5.5+(Windows)、MozillaFirefox1.0+、Mozilla1.3+和Netscape7+。在未來的版本也將會(huì)加入對(duì)Opera的支援。CKeditor并不支持文件和圖片上傳，需要CKfinder插件的支持。網(wǎng)站新聞添加和編輯時(shí)要用到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文件夾復(fù)制到WebRoot下面，然后刪除ckfinder文件夾中以下劃線開頭的文件夾。CKFinderJavackfinder3、解壓ckeditor_3.6.2得到ckeditor_3.6.2ckeditor，并復(fù)制ckeditor文件夾到WebRoot下面：ckeditor_3.6.2/ckeditor,三、使用步驟,4、復(fù)制CKFinder配置文件到工程項(xiàng)目的WEB-INF下面：ckfinderCKFinderJavaWEB-INFconfig.xml5、復(fù)制ckfinderCKFinderJavaWEB-INFlib下面文件夾下面所有jar文件到項(xiàng)目的WEB-INF/lib下面：ckfinderCKFinderJavaWEB-INFlib6、解壓ckeditor-java-3.6.2并復(fù)制ckeditor-java-3.6.2.warWEB-INFlib下面的文件ckeditor-java-core-3.5.3.jar到項(xiàng)目的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文件的內(nèi)容（本質(zhì)整合ckeditor和ckfinder）用下面的內(nèi)容覆蓋源文件的全部?jī)?nèi)容：,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實(shí)現(xiàn)編輯器的使用：在index.jsp文件頭添加如下代碼：在index.jsp的中添加如下代碼：12、編寫ShowData.jsp顯示數(shù)據(jù)顯示數(shù)據(jù),四、關(guān)于破解,替換預(yù)覽圖片方框的文字為：預(yù)覽圖片的位置。要替換的文件的位置：/CKEditor_Finder/WebRoot/ckeditor/plugins/image/dialogs/image.jsCkfinder.js文件的修改：1.CKEditer/config.js文