網上可以使用的富文本編輯器有很多，但是經過慎（sui）重（shou）思（yi）考（cha），選擇了UEditor，畢竟是百度的東西，質量上應該經得起推敲，另外，使用別人的插件，總要去適應別人的編碼習慣，或者掉進別人的坑里。既然都是要繞坑甚至填坑，索性選擇一個名頭響亮的。
天天吆喝富文本編輯器，究竟什么是富文本編輯器呢？答：富文本編輯器，Rich Text Editor, 簡稱 RTE, 是一種可內嵌於瀏覽器，所見即所得的文本編輯器。 它提供類似於 Microsoft Word 的編輯功能，方便不會編寫 HTML 的用戶也可以根據需求設置各種文本格式。（百度）
UEditor是由百度web前端研發部開發所見即所得富文本web編輯器，具有輕量，可定制，注重用戶體驗等特點。主要還是開源免費，具體可以參考官網：http://ueditor.baidu.com/website/index.html
使用很簡單，直接把官網的代碼拷過來
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>ueditor demo</title> </head> <body> <!-- 加載編輯器的容器 --> <script id="container" name="content" type="text/plain"> 這里寫你的初始化內容 </script> <!-- 配置文件 --> <script type="text/javascript" src="ueditor.config.js"></script> <!-- 編輯器源碼文件 --> <script type="text/javascript" src="ueditor.all.js"></script> <!-- 實例化編輯器 --> <script type="text/javascript"> var ue = UE.getEditor('container'); </script> </body> </html>
另外：工具欄可以自己配置，除了修改配置文件，在實例化編輯器時也可以設置，代碼如下：
<script type="text/javascript"> var ue = UE.getEditor('container',{toolbars: [ ['fullscreen', 'source', 'undo', 'redo'], ['bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc'] ]}); </script>
在使用過程中，不是看官網拷過來就可以，在實際項目框架和業務需求中，總會遇到一些問題，現在主要整理以下問題：
一、報錯：（錯誤信息：Uncaught ReferenceError: ZeroClipboard is not defined ueditor.all.min.js:265）
經查看代碼后發現 ueditor.../third-party/zeroclipboard/ZeroClipboard.js中 輸出方法的地方是醬紫的
if (typeof define === "function" && define.amd) {
define(function() {
return ZeroClipboard;
});
} else if (typeof module === "object" && module && typeof module.exports === "object" && module.exports) {
module.exports = ZeroClipboard;
} else {
window.ZeroClipboard = ZeroClipboard;
}
意思就是說
如果當前頁面的模塊加載模式是AMD的 則定義模塊
如果是CommonJs的，則輸出到模塊 ZeroClipboard
否則 把 ZeroClipboard 定義為全局變量
這樣 解決方案就有兩種。
①不使用模塊加載模式來使用這個功能
這樣方法需要修改一點源碼，把上面這段代碼替換成如下代碼即可
if (typeof define === "function" && define.amd) {
define(function() {
return ZeroClipboard;
});
} else if (typeof module === "object" && module && typeof module.exports === "object" && module.exports) {
module.exports = ZeroClipboard;
}
window.ZeroClipboard = ZeroClipboard;
②如果不修改源碼，就得在模塊加載時做處理了
首先是修改配置
require.config({
baseUrl: '',
paths: {
ZeroClipboard: "./UEditor.../ZeroClipboard"//主要是加這句話
}
});
然后是在調用這個模塊並把模塊定義到全局變量
require(['ZeroClipboard'], function (ZeroClipboard) {
window['ZeroClipboard'] = ZeroClipboard;
});
方案1，可以解決該錯誤；主要參考：傳送門
二、編輯器第一次加載正常，第二次加載不出來
1、網上解決方法：
jQuery(function($) {
UE.getEditor('_editor').render('_editor')
)}
該方法測試，第二次能正常加載，但第一次加載會出現兩個編輯器。
2、另一個方法：
jQuery(function($) {
UE.delEditor('_editor');
var ue = UE.getEditor('_editor');
)}
在執行delEditor函數時報錯，源碼中destroy中的某個參數未定義報錯。
3、最終解決方案
if(typeof(UE.getEditor("editor")) !='undefined'){ UE.getEditor("editor").destroy(); }
每次在關閉窗口或者編輯完成后都要執行下這個函數，用於銷毀該編輯器，保證下次加載正常。
三、彈出模態框中顯示編輯器時，部分字體大小、樣式等帶有下拉框，彈出框的工具無法使用，原因是被擋在模態框的下面。
解決：將ueditor.config.js中的zIndex數字改大
四、去掉彈出框“保存文本成功”
步驟1、在ueditor.config.js文件中，將enableAutoSave改為false，並將注釋去掉。
步驟2、然后在ueditor.all.js文件中找到‘contentchange’，函數第一行添加代碼：if (!me.getOpt('enableAutoSave')) {return;}
