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

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

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

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

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

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

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

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

???

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

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

????這時候我們可以跑一下這個項目

??? 4.右鍵—>Run on Server (ps：泡動態(tài)網(wǎ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)是一個富文本編輯器了，我們可以像使用word一樣使用它，但是這個富文本編輯器是官方提供，并不是我們手寫的。

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

??? 6.在WebContent目錄中新建一個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>

??? 上面這個約束是不能直接insert到我們新建的html文件中，因為它的src目錄指的不明確，所以我們要改成

<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.接下來，我們在新建的html文件的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)在我們按照上面的第四步重新跑一遍我們的項目，這時候我們向地址欄輸入的地址是

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

??? 效果圖如下圖所示

???

總結(jié)

??? 今天我們寫了一個富文本編輯器。富文本編輯器的作用范圍很大的。比如我現(xiàn)在用CSDN寫博客這個就采用了富文本編輯器。平常我們在使用百度貼吧，qq空間，新浪微博做評論時就采用的是富文本編輯器。富文本編輯器功能強(qiáng)大，可以進(jìn)行可以加載、編輯和保存RTF或HTML格式的文檔，并支持豐富的格式設(shè)置、自動折行、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)容還不錯，歡迎將生活随笔推薦給好友。