??? 富文本編輯器，Rich Text Editor, 簡稱 RTE, 它提供類似于 Microsoft Word 的編輯功能，容易被不會(huì)編寫 HTML 的用戶并需要設(shè)置各種文本格式的用戶所喜愛。它的應(yīng)用也越來越廣泛。最先只有 IE 瀏覽器支持，其它瀏覽器相繼跟進(jìn)，在功能的豐富性來說，還是 IE 強(qiáng)些。雖然沒有一個(gè)統(tǒng)一的標(biāo)準(zhǔn)，但對(duì)于最基本的功能，各瀏覽器提供的 API 基本一致，從而使編寫一個(gè)跨瀏覽器的富文本編輯器成為可能。

??? 那么我們?cè)陂_發(fā)中怎么使用富文本編輯器呢？豎起耳朵仔細(xì)聽~

??? 首先我們得在Ueditor的官網(wǎng)上下載它的壓縮包 Ueditor壓縮包

? （如果不想手動(dòng)找的同學(xué)，我會(huì)在文章的下方附上Ueditor的下載附件~）

??? -----------------------------------------Downloading---------------------------------------

??? 下載下來之后解壓它，放在桌面上。然后我們打開eclipse。

?? 1.? 右鍵 動(dòng)態(tài)網(wǎng)站項(xiàng)目

?? 2.將下載下來的壓縮包復(fù)制在WebContent下（如下圖所示）

???

??? 3.我們打開utf8-jsp文件夾中會(huì)發(fā)現(xiàn)一堆配置文件（如下圖所示）

????如上圖所示，表示我們的富文本編輯器的環(huán)境配置成功了。

????這時(shí)候我們可以跑一下這個(gè)項(xiàng)目

??? 4.右鍵—>Run on Server (ps：泡動(dòng)態(tài)網(wǎng)站項(xiàng)目的前提是你配置了Tomcat)

??? 5.在瀏覽器地址欄里輸入 http://localhost:8080/ue/utf8-jsp/index.html

????

<script type="text/javascript" charset="utf-8" src="utf8-jsp/ueditor.config.js"></script><script type="text/javascript" charset="utf-8" src="utf8-jsp/ueditor.all.min.js"> </script><script type="text/javascript" charset="utf-8" src="utf8-jsp/lang/zh-cn/zh-cn.js"></script>

??? 如上圖所示，這已經(jīng)是一個(gè)富文本編輯器了，我們可以像使用word一樣使用它，但是這個(gè)富文本編輯器是官方提供，并不是我們手寫的。

??? 接下來，我們來手寫一個(gè)富文本編輯器。

??? 6.在WebContent目錄中新建一個(gè)html文件

??? 7.我們將utf8-jsp/index.html 文件里面的表頭約束復(fù)制過來

????

<script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script> <script type="text/javascript" charset="utf-8" src="ueditor.all.min.js"> </script> <script type="text/javascript" charset="utf-8" src="lang/zh-cn/zh-cn.js"></script>

??? 上面這個(gè)約束是不能直接insert到我們新建的html文件中，因?yàn)樗膕rc目錄指的不明確，所以我們要改成

<script type="text/javascript" charset="utf-8" src="utf8-jsp/ueditor.config.js"></script><script type="text/javascript" charset="utf-8" src="utf8-jsp/ueditor.all.min.js"> </script><script type="text/javascript" charset="utf-8" src="utf8-jsp/lang/zh-cn/zh-cn.js"></script>

???? 8.接下來，我們?cè)谛陆ǖ膆tml文件的body中寫上

<script id="myue" type="text/plain" style="width:1024px;height:500px;"></script>????? 9.在</body>下寫上我們的腳本 <script type="text/javascript">var ue=UE.getEditor('myue')</script>

? ? 整體代碼如下圖所示

???????

??? 寫到這里我們的代碼編寫的工作就完成了。

??? 現(xiàn)在我們按照上面的第四步重新跑一遍我們的項(xiàng)目，這時(shí)候我們向地址欄輸入的地址是

??? http://localhost:8080/ue/

??? 效果圖如下圖所示

???

總結(jié)

??? 今天我們寫了一個(gè)富文本編輯器。富文本編輯器的作用范圍很大的。比如我現(xiàn)在用CSDN寫博客這個(gè)就采用了富文本編輯器。平常我們?cè)谑褂冒俣荣N吧，qq空間，新浪微博做評(píng)論時(shí)就采用的是富文本編輯器。富文本編輯器功能強(qiáng)大，可以進(jìn)行可以加載、編輯和保存RTF或HTML格式的文檔，并支持豐富的格式設(shè)置、自動(dòng)折行、HTML或RTF文檔的導(dǎo)入/導(dǎo)出、表格、圖片和注釋等操作。

??? 所以！我們要感謝開源代碼！致敬！

???

轉(zhuǎn)載于:https://www.cnblogs.com/Black-YeJing/p/9131110.html

總結(jié)

以上是生活随笔為你收集整理的富文本编辑器-Ueditor的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。