UEditor 介紹
UEditor 是由百度「FEX前端研發團隊」開發的所見即所得富文本web編輯器，具有輕量，可定制，注重用戶體驗等特點，開源基於MIT協議，允許自由使用和修改代碼。
1 入門部署和體驗
1.1 下載編輯器
到官網下載 UEditor 最新版：[官網地址]
1.2 創建demo文件
解壓下載的包，在解壓后的目錄創建 demo.html 文件，填入下面的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>
1.3 在瀏覽器打開demo.html
如果看到了下面這樣的編輯器，恭喜你，初次部署成功！
1.4 傳入自定義的參數
編輯器有很多可自定義的參數項，在實例化的時候可以傳入給編輯器：
var ue = UE.getEditor('container', { autoHeight: false });
配置項也可以通過 ueditor.config.js 文件修改，具體的配置方法請看前端配置項說明
1.5 設置和讀取編輯器的內容
通 getContent 和 setContent 方法可以設置和讀取編輯器的內容
var ue = UE.getContent(); //對編輯器的操作最好在編輯器ready之后再做 ue.ready(function() { //設置編輯器的內容 ue.setContent('hello'); //獲取html內容，返回: <p>hello</p> var html = ue.getContent(); //獲取純文本內容，返回: hello var txt = ue.getContentTxt(); });
UEditor 的更多API請看API 文檔
2 詳細文檔
UEditor 官網：http://ueditor.baidu.com
UEditor API 文檔：http://ueditor.baidu.com/doc
UEditor Github 地址：http://github.com/fex-team/ueditor
3 聯系我們
Email：ueditor@baidu.com
Issue：github issue
1、設置監聽事件使textarea節點自動加載顯示內容；
$(function(){
var ue = UE.getEditor('editor');
//對編輯器的操作最好在編輯器ready之后再做
ue.ready(function() {
//獲取html內容，返回: <p>hello</p>
var html = ue.getContent();
ue.getContent(function(){
$("#ueditor_textarea_editorValue").html(html);
});
});
ue.addListener('contentChange',function(){
$("#ueditor_textarea_editorValue").html(this.getContent());
})
});
經設置還是不能掉P標簽
臨時解決方法，但會把全部html標簽去掉，不可取。
其實是因為使用了模板引擎的標簽{{}}導致的，它會把html標簽過慮成實體字符，所以ueditor自動加P標簽;
只要把{{}}換成{！！ ！！}，問題就解決了，它不會過慮html標簽。
2、網上的做
百度的Ueditor編輯器出於安全xìng考慮，用戶在html模式下粘貼進去的html文檔會自動被去除樣式和轉義。雖然安全的，但是非常不方便。
做一下修改把這個功能去掉。
一、打開ueditor.all.js
二、大概9300行找到 ///plugin 編輯器默認的過濾轉換機制，把下面的
'allowDivTransToP':true
值改成false。為true的時候會自動把div轉成p。
三、大概9429行，有個case 'li'，這個是把li里面的樣式去掉，把這個case注釋掉。
四、大概14058行，下面的第一個utils.each功能注釋掉，這個是自動給li里面的內容增加一個p。
五、大概14220行，
node.className = utils.trim(node.className.replace(/list-paddingleft-\w+/,'')) + ' list-paddingleft-' + type;
注釋掉，這個是自動給ul增加一個內置的樣式。
下面的14222行
li.style.cssText && (li.style.cssText = '');
注釋掉，這個是自動去除粘貼進去的代碼的li的style樣式
至此，我們粘貼進去的html格式的ul和li就不會被轉義了。