使用百度的富文本編輯器UEditor遇到的問題總結

1、下載地址：http://ueditor.baidu.com/website/download.html（我下載的是.net版本）

下載后要先看一下ueditor.config.js和 net/config.json的文件，里面是關於圖片上傳和其他方法的一些路徑配置

2、顯示編輯頁面（一定要看使用文檔：http://fex.baidu.com/ueditor/#server-deploy）

1. 引入所需的js文件
2. 初始化編輯器    html代碼：

   <div class="form-group has-warning">
                   <textarea class="A4page" id="myEditor" name="NewsContent"></textarea>
               </div>

   jquery代碼：

    var ue = UE.getEditor('myEditor', {
               toolbars: [
                   ['fullscreen', 'source', '|', 'undo', 'redo', '|',
               'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
               'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
               'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
               'directionalityltr', 'directionalityrtl', 'indent', '|',
               'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
               'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
               'simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertframe', 'insertcode', 'pagebreak', 'template', 'background', '|',
               'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
               'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
               'print', 'preview', 'searchreplace', 'help', 'drafts']
               ],
               allHtmlEnabled: false,//提交到后台的數據是否包含整個html字符串
               autoHeightEnabled: false,
               autoFloatEnabled: true,
               allowDivTransToP: false//阻止div標簽自動轉換為p標簽
           });

   說明：修改配置項的方法： 1. 方法一：修改 ueditor.config.js 里面的 toolbars 2. 方法二：實例化編輯器的時候傳入 toolbars 參數（詳情參考：http://fex.baidu.com/ueditor/#start-toolbar）

3. 前端配置基本上配置好了，下面是后端配置（如果后端配置不好，上傳圖片功能將無法使用。網址：http://fex.baidu.com/ueditor/#server-net）我配置了好久才配置好的，按照文檔上說的做就行了
4. 當你的編輯器可以使用的時候，獲取編輯器里的內容（網址：http://fex.baidu.com/ueditor/#api-common）

5. //實例化編輯器到id為 container 的 dom 容器上：
   var ue = UE.getEditor('container');
   //設置編輯器內容：
   ue.ready(function() {
       ue.setContent('<p>hello!</p>');
   });
   //追加編輯器內容：
   ue.ready(function() {
       ue.setContent('<p>new text</p>', true);
   });
   //獲取編輯器html內容：
   ue.ready(function() {
       var html = ue.getContent();
   });
   //獲取純文本內容：
   ue.getContentTxt();
   //獲取保留格式的文本內容：
   ue.getPlainTxt();
   //獲取純文本內容：
   ue.getContentTxt();
   //判斷編輯器是否有內容：
   ue.hasContents();
   //讓編輯器獲得焦點：
   ue.focus();
   //讓編輯器獲得焦點
   ue.blur();
   //判斷編輯器是否獲得焦點：
   ue.isFocus();
   //設置當前編輯區域不可編輯：
   ue.setDisabled();
   //設置當前編輯區域可以編輯：
   ue.setEnabled();
   //隱藏編輯器：
   ue.setHide();
   //顯示編輯器：
   ue.setShow();
   //獲得當前選中的文本：
   ue.selection.getText();
   //常用命令：
   //在當前光標位置插入html內容
   ue.execCommand('inserthtml', '<span>hello!</span>');
   //設置當前選區文本格式：
   ue.execCommand('bold'); //加粗
   ue.execCommand('italic'); //加斜線
   ue.execCommand('subscript'); //設置上標
   ue.execCommand('supscript'); //設置下標
   ue.execCommand('forecolor', '#FF0000'); //設置字體顏色
   ue.execCommand('backcolor', '#0000FF'); //設置字體背景顏色
   //回退編輯器內容：
   ue.execCommand('undo');
   //撤銷回退編輯器內容：
   ue.execCommand('redo');
   //切換源碼和可視化編輯模式：
   ue.execCommand('source');
   //選中所有內容：
   ue.execCommand('selectall');
   //清空內容：
   ue.execCommand('cleardoc');
   //讀取草稿箱
   ue.execCommand('drafts');
   //清空草稿箱
   ue.execCommand('clearlocaldata');

    

6. 輸入的數據是這樣的：

7. 獲取到的數據是這樣的：<p><img src="http://img.baidu.com/hi/jx2/j_0015.gif"/><img src="/assets/utf8-net/net/upload/image/20160427/6359737678078530983400002.jpg" title="QQ截圖20160427144629.jpg" alt="QQ截圖20160427144629.jpg"/>防火防盜發貨的發貨</p>

8. 將數據存到數據庫中了，那么怎么讓數據原樣顯示到編輯器里呢？（這個問題我試了一天，開始我以為是這個函數uParse，但是我試了好多路徑都不管用，如果誰用這個方法實現了，一定要告訴我一聲哦，先qqq了）
9. 后台獲取數據：

    public ActionResult GetDetails(string NewsId)
           {
               int id = Int32.Parse(NewsId);
               NewsInfo news = db.NewsInfoes.Find(id);
               ViewData["news"] = news;
               return View();
           }

   前台html代碼：

   <div class="col-sm-6">
       <div class="panel">
           <div class="panel-body">
               <div class="form-group has-success">
                   <label class="control-label" for="NewsName">新聞標題：</label>
                   <input type="text" class="form-control" id="NewsName" name="NewsName" placeholder="新聞標題" style="width:600px" value="@(((NewsInfo)ViewData["news"]).NewsName)" />
               </div>
               <div class="form-group has-warning">
                   <textarea class="A4page" id="myEditor" name="NewsContent">@(((NewsInfo)ViewData["news"]).NewsContent)</textarea>
               </div>
           </div>
       </div>
   </div>

   jquery代碼：

      function load() {
               var ue = UE.getEditor('myEditor', {
                   toolbars: [
                       ['fullscreen', 'source', '|', 'undo', 'redo', '|',
                   'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
                   'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
                   'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
                   'directionalityltr', 'directionalityrtl', 'indent', '|',
                   'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
                   'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
                   'simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertframe', 'insertcode', 'pagebreak', 'template', 'background', '|',
                   'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
                   'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
                   'print', 'preview', 'searchreplace', 'help', 'drafts']
                   ],
                   autoHeightEnabled: false,
                   autoFloatEnabled: true,
                   allowDivTransToP: false//阻止div標簽自動轉換為p標簽
               });
           }  
   
    $(function () {
               load();
           });

   然后就可以了，O(∩_∩)O哈哈~

10. 我的流程：先添加數據
11. 
12. 在新聞列表里點擊新聞標題，傳遞新聞id獲取新聞詳細內容
13. 
14. 最后將數據展示到新聞修改頁面的編輯器上
15.