ASP.NET使用百度編輯器（UEditor）使用方法

時間 2019-11-10

標籤 asp.net asp 使用百度編輯器 ueditor 使用方法欄目 ASP 简体版

原文原文鏈接

ASP.NET使用百度編輯器（UEditor）方法以下

第一步到百度官網下載百度編輯器

http://ueditor.baidu.com/website/download.htmljavascript

下載.net版本

第二步：減壓複製到本身項目下新建的文件夾Content（文件夾隨意，本身定義）能夠起個新的名字好比（ueditorUTF8）

第三步：添加引用，在項目中添加引用（選擇瀏覽，在複製文件夾ueditorUTF8的net的bin目錄下找到dll文件，添加引用）

第四步：修改圖片訪問路徑找到net文件夾裏面的config.json文件，在找到全部的 /* 圖片訪問路徑前綴 */ 而後在前面的途徑加上：/Content/

找到config.jsonhtml

第五步：前端引入js路徑這裏的路徑必定得引入真確，看看本身的編輯器在哪來放着而後分別引入三個文件：注意順序不要錯了

    <script type="text/javascript" charset="utf-8" src="../../Content/ueditorUTF8/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="../../Content/ueditorUTF8/ueditor.all.min.js"> </script>
   <script type="text/javascript" charset="utf-8" src="../../Content/ueditorUTF8/lang/zh-cn/zh-cn.js"></script>

第六步：前端頁面加入注意：下面的var ue = UE.getEditor('txtEditorContents');中的名稱要與後面添加使用編輯器的名稱一致

  1 <script type="text/javascript">
  2 
  3         //實例化編輯器
  4         //建議使用工廠方法getEditor建立和引用編輯器實例，若是在某個閉包下引用該編輯器，直接調用UE.getEditor('editor')就能拿到相關的實例
  5         var ue = UE.getEditor('txtEditorContents');
  6         
  7 
  8         function isFocus(e) {
  9             alert(UE.getEditor('editor').isFocus());
 10             UE.dom.domUtils.preventDefault(e)
 11         }
 12         function setblur(e) {
 13             UE.getEditor('editor').blur();
 14             UE.dom.domUtils.preventDefault(e)
 15         }
 16         function insertHtml() {
 17             var value = prompt('插入html代碼', '');
 18             UE.getEditor('editor').execCommand('insertHtml', value)
 19         }
 20         function createEditor() {
 21             enableBtn();
 22             UE.getEditor('editor');
 23         }
 24         function getAllHtml() {
 25             alert(UE.getEditor('editor').getAllHtml())
 26         }
 27         function getContent() {
 28             var arr = [];
 29             arr.push("使用editor.getContent()方法能夠得到編輯器的內容");
 30             arr.push("內容爲：");
 31             arr.push(UE.getEditor('editor').getContent());
 32             alert(arr.join("\n"));
 33         }
 34         function getPlainTxt() {
 35             var arr = [];
 36             arr.push("使用editor.getPlainTxt()方法能夠得到編輯器的帶格式的純文本內容");
 37             arr.push("內容爲：");
 38             arr.push(UE.getEditor('editor').getPlainTxt());
 39             alert(arr.join('\n'))
 40         }
 41         function setContent(isAppendTo) {
 42             var arr = [];
 43             arr.push("使用editor.setContent('歡迎使用ueditor')方法能夠設置編輯器的內容");
 44             UE.getEditor('editor').setContent('歡迎使用ueditor', isAppendTo);
 45             alert(arr.join("\n"));
 46         }
 47         function setDisabled() {
 48             UE.getEditor('editor').setDisabled('fullscreen');
 49             disableBtn("enable");
 50         }
 51 
 52         function setEnabled() {
 53             UE.getEditor('editor').setEnabled();
 54             enableBtn();
 55         }
 56 
 57         function getText() {
 58             //當你點擊按鈕時編輯區域已經失去了焦點，若是直接用getText將不會獲得內容，因此要在選回來，而後取得內容
 59             var range = UE.getEditor('editor').selection.getRange();
 60             range.select();
 61             var txt = UE.getEditor('editor').selection.getText();
 62             alert(txt)
 63         }
 64 
 65         function getContentTxt() {
 66             var arr = [];
 67             arr.push("使用editor.getContentTxt()方法能夠得到編輯器的純文本內容");
 68             arr.push("編輯器的純文本內容爲：");
 69             arr.push(UE.getEditor('editor').getContentTxt());
 70             alert(arr.join("\n"));
 71         }
 72         function hasContent() {
 73             var arr = [];
 74             arr.push("使用editor.hasContents()方法判斷編輯器裏是否有內容");
 75             arr.push("判斷結果爲：");
 76             arr.push(UE.getEditor('editor').hasContents());
 77             alert(arr.join("\n"));
 78         }
 79         function setFocus() {
 80             UE.getEditor('editor').focus();
 81         }
 82         function deleteEditor() {
 83             disableBtn();
 84             UE.getEditor('editor').destroy();
 85         }
 86         function disableBtn(str) {
 87             var div = document.getElementById('btns');
 88             var btns = UE.dom.domUtils.getElementsByTagName(div, "button");
 89             for (var i = 0, btn; btn = btns[i++];) {
 90                 if (btn.id == str) {
 91                     UE.dom.domUtils.removeAttributes(btn, ["disabled"]);
 92                 } else {
 93                     btn.setAttribute("disabled", "true");
 94                 }
 95             }
 96         }
 97         function enableBtn() {
 98             var div = document.getElementById('btns');
 99             var btns = UE.dom.domUtils.getElementsByTagName(div, "button");
100             for (var i = 0, btn; btn = btns[i++];) {
101                 UE.dom.domUtils.removeAttributes(btn, ["disabled"]);
102             }
103         }
104 
105         function getLocalData() {
106             alert(UE.getEditor('editor').execCommand("getlocaldata"));
107         }
108 
109         function clearLocalData() {
110             UE.getEditor('editor').execCommand("clearlocaldata");
111             alert("已清空草稿箱")
112         }
113 </script>

第七步驟：在須要使用編輯器的地方添加一個TextBox控件，id="txtEditorContents"

好比：前端

1 <dt>文章內容：</dt>
2     <dd style="line-height: 0; width: 89%">
3         <asp:TextBox ID="txtEditorContents" name="txtEditorContents" runat="server" TextMode="MultiLine" Height="400px" Width="1000px" ClientIDMode="Static 」 </asp:TextBox>
4     </dd>