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

時間 2019-11-15

標籤 jsp 嵌入 ueditor umeditor 文本編輯器欄目 JSP 简体版

原文原文鏈接

一.下載：javascript

1.什麼是富文本編輯器？就是：html

或者是這個：java

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

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

兩個都是百度出品的，下載地址：ueditor 、 umeditor 。jsp

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

而後獲獲取輸入框內的HTML內容：函數

二.安裝：佈局

（如下說明只以ueditor爲例，umeditor同樣的操做）spa

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代碼塊裏面，有不少函數供咱們使用編輯器，根據須要複製裏面的代碼便可：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。