一.下載:
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代碼塊里面,有很多函數供我們使用編輯器,根據需要復制里面的代碼即可: