記錄.net使用ueditor富文本編輯器

時間 2019-12-08

標籤記錄使用 ueditor 文本編輯器简体版

原文原文鏈接

UEditor是什麼javascript

　　最近在在項目的時候使用到了百度的富文本編輯器。官網有詳細的操做流程文檔。這裏我只是記錄項目中經常使用到的一些事件。以便往後能夠方便查詢。html

　　UEditor是百度的一個javascript編輯器的開源項目。支持Php、Asp、Asp.Net 、Jsp多種後臺配置。這裏記錄的是Asp的寫法。具體的作法可查看官網有詳細的文檔。java

　　官網傳送:https://ueditor.baidu.com/website/web

UEditor的引用編輯器

首先，下載最新版本https://ueditor.baidu.com/website/download.html#ueditorspa

其次，在須要用的界面引用ueditor.config.js和ueditor.all.jscode

 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>

而後，設置和讀取編輯器的內容htm

 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 });

　　最後，判斷富文本編輯是是否錄入信息。blog

1 var IsHas = ue.hasContents();
2 if (IsHas == false) {  //爲false時內容爲空。}
3 else if (IsHas == true) { //爲false時內容不爲空。 }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。