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

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("
"));
 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('
'))
 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("
"));
 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("
"));
 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("
"));
 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;  89%">
3         <asp:TextBox ID="txtEditorContents" name="txtEditorContents" runat="server" TextMode="MultiLine" Height="400px" Width="1000px" ClientIDMode="Static ” </asp:TextBox>
4     </dd>

第八步骤：运行试试看红色边框中的别是显示出的效果，三个字来形容（萌萌哒）

第九步：提交的后台怎么获取编辑器输入的值     ：通过textbox的id就可以得到如图接下来你就可以存储数据库等等操作了

 

以上就是我的总结，如有不对之处还望见谅！

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/JiYF/p/6495929.html