UEditor是由百度開發的富文本web編輯器，它是開源的，允許自由使用和修改。界面相似于word，可方便大家的使用

使用步驟：

? ? ? ?

?1.下載與查看文檔：

ueditor完全開源，可在其官方網站下載：http://ueditor.baidu.com/website/index.html

在官網上可以查看ueditor的文檔了解它如何使用，閱讀API文檔來查看命令。

?????????

2. 源代碼的導入：

根據自己所需的版本下載后解壓，將得到的文件導入到項目根目錄（webapp）下

??????????

?3. 頁面配置：

3.1在head中添加文件的引用

<script type="text/javascript" src="<c:url value="/resources/ueditor/ueditor.config.js" />" ></script>
<script type="text/javascript" src="<c:url value="/resources/ueditor/ueditor.all.min.js" />" ></script>

注意：這兩個的順序不能交換，否則編輯器不能初始化

3.2 在script中編寫js

初始化編輯器:

var ue = UE.getEditor('editor');

設置編輯器的初始化內容：

ue.ready(function() {
?? ??? ??? ???? //設置編輯器的內容"
?? ??? ??? ???? ue.setContent(date);? date為動態傳入的數據
?? ??? ??? ??? //獲取編輯器帶格式的內容
?? ??? ??? ??? var plain = ue.getPlainTxt();

?????????????? //獲取編輯器html文本

?????????????? var html = ue.getContent();

?????????????? //獲取編輯器純文本內容

?????????????? var text = ue.getContentText();

?? ??? ???? });

3.3配置body

<div>
?? ??? ?<script id="editor" type="text/plain" name="content"? style="width:845px;height:400px;">
?? ??? ??? ???? 這里也可以直接寫固定的文本內容
?? ??? ?</script>
?? ?</div>

???????? 4 編輯器的工具

這個工具列表有好多我們都用不到，需要去除一些不必要的工具。

4.1 方法一

在ueditor.config.js文件中對 toolbars[] 中不需要的工具刪掉或注釋掉就可以，建議注釋掉，萬一以后要用到呢。

4.2 方法二

在編輯器實例化的時候傳入toolbars參數

toolbars: [['fullscreen', 'source', 'undo', 'redo', 'bold'][' ',' '] 一個單引號里面一個工具，幾個中括號表示工具欄分為幾行，括號內的表示這行的工具]

總結

以上是生活随笔為你收集整理的ueditor的初始化使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。