天天看點

關于UEditor富文本編輯器的使用

關于UEditor富文本編輯器的使用
關于UEditor富文本編輯器的使用

下載下傳完解壓之後就這個:

關于UEditor富文本編輯器的使用
關于UEditor富文本編輯器的使用

第二步:我會把檔案名utf-8-jsp這個檔案名改為ueditor,然後把這個ueditor檔案夾拷貝到eclipse項目的webcontent目錄下

關于UEditor富文本編輯器的使用

     注意:

             其中的zh-ch.js我是從lang檔案夾裡面拷貝出來的,目的是為了友善引入,不拷貝出來完全可以,到時候引入jsp的時候注意下路徑就好了。

             當ueditor添加到webcontent中時候回報一個錯誤,是config.json檔案有錯,這個是校驗的錯誤,可以不用管它,如果有強迫症,那麼你就右鍵項名,修改properties,找出builders 中validation去掉勾。然後删除ueditor,再重新複制粘貼。

第三步:當然是要導入這個編譯器所需要的依賴了,在ueditor/jsp/lib下

關于UEditor富文本編輯器的使用

第四步:然後就是在指定的jsp頁面中引入三個js,分别是ueditor.all.js和ueditor.config.js和zh-cn.js,其中ueditor.all.js官網是建議用ueditor.all.min.js,但是導入項目時這個ueditor.all.min.js會報錯,我就直接用ueditor.all.js了,内容都一樣,隻不過檔案大一點點。無關緊要啦。

關于UEditor富文本編輯器的使用

注意:

    這裡的導入順序不能變,不然會報錯

第五步:通過上面的步驟之後基本的環境就已經搭完了,下面就是畫龍點睛之筆了,找到要添加編譯器的textarea标簽,擷取其id,在下面添加上這一段就歐了,效果立馬上演。

關于UEditor富文本編輯器的使用

效果如圖:

關于UEditor富文本編輯器的使用