1. 程式人生 > >富文字編輯ueditor在jsp裡使用配置總結

富文字編輯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類:

  1. <%@ page import="cn.edu.hpu.filter.Uploader" %>
經過以上配置,即完成了圖片的上傳配置,能夠成功的上傳圖片到指定的資料夾。但是這裡也存在一個問題就是:我們所上傳的圖片是放在tomcat的webapps下的專案中的一個資料夾,如果tomcat重新啟動的話,這些檔案是不會消失的,但如果是重新部署的話那所上傳的所有的檔案都會消失,原本想嘗試用虛擬路徑試試,上傳圖片後能夠自動的傳到本地磁碟上的不是tomcat下的某個資料夾,保證圖片不會因為專案的重新部署而消失,但是沒有成功,不知某位大牛知道解決方法?懇請賜教,感激不盡哪!

四、附件的上傳配置,其實和圖片的上傳配置是一個道理,只需要在fileUp.jsp頁面中匯入所需的Uploader類即可。

這樣就解決了ueditor的基本使用問題,當然還有很多可以定製的內容,這個等以後在實踐中用到了再繼續補充。