ASP.NET使用百度编辑器（UEditor）方法

来源：互联网发布：java基础学完学什么编辑：程序博客网时间：2024/06/06 00:51

ASP.NET使用百度编辑器（UEditor）方法如下

第一步到百度官网下载百度编辑器

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

下载.net版本

第二步：减压复制到自己项目下新建的文件夹Content（文件夹随意，自己定义）可以起个新的名字比如（ueditorUTF8）

第三步：添加引用，在项目中添加引用（选择浏览，在复制文件夹ueditorUTF8的net的bin目录下找到dll文件，添加引用）

第四步：修改图片访问路径找到net文件夹里面的config.json文件，在找到所有的 /* 图片访问路径前缀 */ 然后在前面的途径加上：/Content/

找到config.json

第五步：前端引入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>