百度编辑器-UEditor使用注意

1.从官网http://ueditor.baidu.com/website/download.html下载[1.4.3.1.Net 版本]UTF-8版，根据自己项目所需下载对应

2.把ueditor加载到自己的项目中

3.引用顺序不要错，

<link href="../asset/lib/ueditor/themes/default/css/ueditor.css" rel="stylesheet" />
   <script src="../js/jquery-2.1.4.min.js"></script>
   <script src="../asset/lib/ueditor/ueditor.config.js"></script>
   <script src="../asset/lib/ueditor/ueditor.parse.js"></script>
   <script src="../asset/lib/ueditor/ueditor.all.js"></script>

4.HTML中加上

<script id="editor" type="text/plain" style="width: 800px; height: 500px;"></script>

5.使用以下创建ueditor的实例

var ue = UE.getEditor('editor');

6.以下编辑器自带的函数，可以用来操作ueditor，文档比较简单参考官方就行

function isFocus(e) {
                 alert(UE.getEditor('editor').isFocus());
                 UE.dom.domUtils.preventDefault(e)
             }
             function setblur(e) {
                 UE.getEditor('editor').blur();
                 UE.dom.domUtils.preventDefault(e)
             }
             function insertHtml() {
                 var value = prompt('插入html代码', '');
                 UE.getEditor('editor').execCommand('insertHtml', value)
             }
             function createEditor() {
                 enableBtn();
                 UE.getEditor('editor');
             }
             function getAllHtml() {
                 alert(UE.getEditor('editor').getAllHtml())
             }
             function getContent() {
                 var arr = [];
                 arr.push("使用editor.getContent()方法可以获得编辑器的内容");
                 arr.push("内容为：");
                 arr.push(UE.getEditor('editor').getContent());
                 alert(arr.join("\n"));
             }
             function getPlainTxt() {
                 var arr = [];
                 arr.push("使用editor.getPlainTxt()方法可以获得编辑器的带格式的纯文本内容");
                 arr.push("内容为：");
                 arr.push(UE.getEditor('editor').getPlainTxt());
                 alert(arr.join('\n'))
             }
             function setContent(isAppendTo) {
                 var arr = [];
                 arr.push("使用editor.setContent('欢迎使用ueditor')方法可以设置编辑器的内容");
                 UE.getEditor('editor').setContent('欢迎使用ueditor', isAppendTo);
                 alert(arr.join("\n"));
             }
             function setDisabled() {
                 UE.getEditor('editor').setDisabled('fullscreen');
                 disableBtn("enable");
             }
 
             function setEnabled() {
                 UE.getEditor('editor').setEnabled();
                 enableBtn();
             }
 
             function getText() {
                 //当你点击按钮时编辑区域已经失去了焦点，如果直接用getText将不会得到内容，所以要在选回来，然后取得内容
                 var range = UE.getEditor('editor').selection.getRange();
                 range.select();
                 var txt = UE.getEditor('editor').selection.getText();
                 alert(txt)
             }
 
             function getContentTxt() {
                 var arr = [];
                 arr.push("使用editor.getContentTxt()方法可以获得编辑器的纯文本内容");
                 arr.push("编辑器的纯文本内容为：");
                 arr.push(UE.getEditor('editor').getContentTxt());
                 alert(arr.join("\n"));
             }
             function hasContent() {
                 var arr = [];
                 arr.push("使用editor.hasContents()方法判断编辑器里是否有内容");
                 arr.push("判断结果为：");
                 arr.push(UE.getEditor('editor').hasContents());
                 alert(arr.join("\n"));
             }
             function setFocus() {
                 UE.getEditor('editor').focus();
             }
             function deleteEditor() {
                 disableBtn();
                 UE.getEditor('editor').destroy();
             }
             function disableBtn(str) {
                 var div = document.getElementById('btns');
                 var btns = UE.dom.domUtils.getElementsByTagName(div, "button");
                 for (var i = 0, btn; btn = btns[i++];) {
                     if (btn.id == str) {
                         UE.dom.domUtils.removeAttributes(btn, ["disabled"]);
                     } else {
                         btn.setAttribute("disabled", "true");
                     }
                 }
             }
             function enableBtn() {
                 var div = document.getElementById('btns');
                 var btns = UE.dom.domUtils.getElementsByTagName(div, "button");
                 for (var i = 0, btn; btn = btns[i++];) {
                     UE.dom.domUtils.removeAttributes(btn, ["disabled"]);
                 }
             }

7.主要用getContent和setContent来获得和设置ueditor的html,另外为了保存html在html中加入一个隐藏的文本域来保存编辑的html，要保存时先把html加入到隐藏文本域中，在后台就直接可以获取值

<asp:HiddenField ID="TextContent" runat="server" Value="" />

jquery简单取值或设值，设值的时候一定要在ueditor加载完成后才能设值，否则会报错，使用ready或addLinstener都行

$('#BtnSave').click(function () {
                //保存按钮
                $('#TextContent').val(UE.getEditor('editor').getContent());
            });
            var initval = $('#TextContent').val();
            ue.ready(function() {
                ue.setContent(initval);
            });

8.图片保存路径设值，在这里要配置net目录下的config.json，将imageUrlPrefix或imagePaehFormat配置成你想要的目录，imageUrlPrefix开始是/ueditor/net/，根据自己项目所需配置就行，文件路径也是如此