1. 程式人生 > >網頁文字編輯器UEditor.1.4.3 jsp使用配置

網頁文字編輯器UEditor.1.4.3 jsp使用配置

網頁文字編輯器UEditor.1.4.3 jsp使用配置

由於專案需要文字編輯的功能,研究了百度ueditor編輯器,實現線上富文字的編輯和圖片檔案的上傳。

首先需要配置好jsp開發的基本環境,即jee-eclipse(IDE)、JRE、Tomcat(JSP伺服器),網上資料很多。

    1、下載jsp版的ueditor,解壓後改為ueditor。下載地址

http://ueditor.baidu.com/website/download.html

    2、在eclipse裡新建一個 Dynamic web專案(測試專案為UeditorTest,可替換為實際使用的名字),建好專案後,裡面有一個WebContent資料夾

    3、將解壓後的ueditor複製到WebContent裡。將/UeditorTest/WebContent/ueditor/jsp/lib下的5個jar檔案複製到/UeditorTest/WebContent/WEB-INF/lib中。在eclipse的Project Explorer中右擊專案名選擇重新整理。


   執行/UeditorTest/WebContent/ueditor/index.html,開啟示例DEMO網頁,在編輯器中輸入文字,點選獲取內容,會彈出包含網頁格式的輸入內容。此時可以上傳圖片或附件,但無法正常顯示,原因在於沒有正確配置圖片或路徑字首。

    Eclipse釋出web專案的臨時位置\workspace\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\專案名中。Ueditor預設的上傳路徑\ueditor\jsp\upload,開啟Eclipse釋出專案的資料夾找到剛才上傳的檔案。Ueditor會將檔案上傳在ueditorz自身目錄下的\jsp\upload,但讀取時需要從伺服器即\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps計算實際地址,故需加上訪問字首/UeditorTest補齊路徑。 





    4、開啟/UeditorTest/WebContent/ueditor/jsp/config.json,在所有所有路徑訪問字首中加上/UeditorTest,儲存重新整理會同步至專案釋出目錄。

    現在開啟示例DEMO,就可以正常新增圖片或附件。其他專案中使用首先就是引入兩個js檔案,分別為editor_config.js和editor_all.js。然後就是js建立一個可編輯區域,用來建立編輯器,需要註明id,型別為text/plain,最後例項化編輯器即可。

    網上有人需要配置/ueditor/ueditor.config.js,並沒有配置也能用不知道為什麼。