JSP嵌入ueditor、umeditor富文本編輯器


 

一.下載:

1.什么是富文本編輯器?就是:

或者是這個:

其中第一個功能比較詳盡,其主要用來編寫文章,名字叫做udeitor。

第二個就相對精簡,是第一個的MINI版,其主要用來編輯即時聊天或者發帖,名字叫做umeditor。

兩個都是百度出品的,下載地址:ueditor umeditor 。

富文本編輯器的主要原理:將輸入框內的文本轉換成HTML標簽。如下內容:

然后獲獲取輸入框內的HTML內容:

 

二.安裝:

(以下說明只以ueditor為例,umeditor一樣的操作)

1.將下載后的壓縮包解壓,然后將整個文件夾(最好改個名,如ueditor)直接復制WebContent目錄下。

 

2. 此時,ueditor目錄可能會報錯(沒有報錯則跳過這一步),緣因里面有個json文件不知道在干什么。這時:

1)右擊項目名字,找到“Properties”選項點擊,進入界面之后在左欄目找打“Validation”,單擊,如下:

取消“JSON Validator”那一欄個兩個勾,然后確認即可。

3.將ueditor/jsp/lib目錄下的所有jar包復制一份到WEB-INF/lib文件夾里:

   ========> 

4.發現所有在WebContent目錄下需要依賴的jar包都要復制多一份到WEB-INF/lib里頭,如富文本編輯器、jstl、文件上傳下載等所依賴的包。不知為何?

 

 

三.使用 

1.首先需要引入三個js文件:

2.然后在<body>里面添加標簽,這就是一個富文本編輯器了,可以在style里面設置大小:

3.在javascript里面實例化編輯器,如下:

實際就是聲明一個編輯器的變量ue。沒有這一步的話編輯器是不會顯示的,不知道這個“實例化”是什么意思?

4.默認設置下,如果輸入內容超出輸入框的高度范圍,那么編輯器的輸入框就會自動延長。這樣就很可能會破壞了HTML的布局,因此我們想要輸入框固定不變,多出的內容用滾動條還顯示。如何設置?

在ueditor文件夾的根目錄下找到ueditor.config.js文件,打開,然后在一堆注釋里面找到:

這個就是設置輸入框是否會自動長高的選項。我們不想其自動長高,因而將其設為false,然后將注釋取消:

5.最后一步,在ueditor目錄下有一個index.html文件,在實例化UE的那個javascript代碼塊里面,有很多函數供我們使用編輯器,根據需要復制里面的代碼即可:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM