UEditor是什么
最近在在項目的時候使用到了百度的富文本編輯器。官網有詳細的操作流程文檔。這里我只是記錄項目中常用到的一些事件。以便日后可以方便查詢。
UEditor是百度的一個javascript編輯器的開源項目。支持Php、Asp、Asp.Net 、Jsp多種后台配置。這里記錄的是Asp的寫法。具體的做法可查看官網有詳細的文檔。
官網傳送:https://ueditor.baidu.com/website/
UEditor的引用
首先，下載最新版本https://ueditor.baidu.com/website/download.html#ueditor
其次，在需要用的界面引用ueditor.config.js和ueditor.all.js
1 <!DOCTYPE HTML> 2 <html lang="en-US"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>ueditor demo</title> 7 </head> 8 9 <body> 10 <!-- 加載編輯器的容器 --> 11 <script id="container" name="content" type="text/plain"> 12 這里寫你的初始化內容 13 </script> 14 <!-- 配置文件 --> 15 <script type="text/javascript" src="ueditor.config.js"></script> 16 <!-- 編輯器源碼文件 --> 17 <script type="text/javascript" src="ueditor.all.js"></script> 18 <!-- 實例化編輯器 --> 19 <script type="text/javascript"> 20 var ue = UE.getEditor('container'); 21 </script> 22 </body> 23 24 </html>
然后，設置和讀取編輯器的內容
1 ar ue = UE.getContent(); 2 //對編輯器的操作最好在編輯器ready之后再做 3 ue.ready(function() { 4 //設置編輯器的內容 5 ue.setContent('hello'); 6 //獲取html內容，返回: <p>hello</p> 7 var html = ue.getContent(); 8 //獲取純文本內容，返回: hello 9 var txt = ue.getContentTxt(); 10 });
最后，判斷富文本編輯是是否錄入信息。
1 var IsHas = ue.hasContents(); 2 if (IsHas == false) { //為false時內容為空。} 3 else if (IsHas == true) { //為false時內容不為空。 }