富文字編輯ueditor在jsp裡使用配置總結
專案中使用了ueditor編輯器,剛開始的時候真的是一頭霧水,不過後來總算是能夠將ueditor整合到專案中了,現在把自己的配置過程記錄一下:
一、首先得讓編輯器能夠在頁面上顯示出來,這個在官方文件寫的非常的詳細,可直接按照官方文件的說明即可成功配置,我按如下步驟配置:
(1)我下載的是jsp版本的,解壓後放在專案中自己的某個位置即可,我放在如下:
(2)匯入所需的檔案,注意檔案在專案中的路徑
(3)建立編輯器例項及其DOM容器(使用script而不用textarea的好處在官方文件上有說明)
(4)在editor_config.js中查詢URL變數配置編輯器在專案中的路徑
經過以上步驟,編輯器即可在頁面上顯示。如果大小不合適,可在editor_config.js中進行配置:
二、然後就需要將在編輯器中所輸入的資料在後臺進行接收,即前後端互動,按如下步驟:
(1)如果是要將已有的資料在頁面上進行顯示,只需將需要顯示的內容寫在<script></script>標籤之間即可,如:
(2)如果是新表單輸入的內容,和(1)差不多,只不過不用寫${editnews.content}即可,然後在action中以變數形式接收(struts2)或在servlet中使用request.getParameter(
""
經過以上步驟,即可完成前後端的文字資料互動。
三、圖片的上傳配置處理:
(1)首先確認將ueditor原始碼包下的jsp資料夾中的commons-fileupload-1.2.2.jar放入專案中的lib下,並將Uploader類放在src中的某個包中
(2)配置editor_config.js中的圖片上傳部分:
其中,然後在imageUp.jsp中匯入所需要的Uploader類:
- <%@ page import="cn.edu.hpu.filter.Uploader" %>
四、附件的上傳配置,其實和圖片的上傳配置是一個道理,只需要在fileUp.jsp頁面中匯入所需的Uploader類即可。
這樣就解決了ueditor的基本使用問題,當然還有很多可以定製的內容,這個等以後在實踐中用到了再繼續補充。