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就可以得到如图接下来你就可以存储数据库等等操作了