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');中的名稱要與后面添加使用編輯器的名稱一致

<script type="text/javascript">

        //實例化編輯器
        //建議使用工廠方法getEditor創建和引用編輯器實例，如果在某個閉包下引用該編輯器，直接調用UE.getEditor('editor')就能拿到相關的實例
        var ue = UE.getEditor('txtEditorContents');
        

        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"]);
            }
        }

        function getLocalData() {
            alert(UE.getEditor('editor').execCommand("getlocaldata"));
        }

        function clearLocalData() {
            UE.getEditor('editor').execCommand("clearlocaldata");
            alert("已清空草稿箱")
        }
</script>

第七步驟：在需要使用編輯器的地方添加一個TextBox控件，id="txtEditorContents"

比如：

<dt>文章內容：</dt>
    <dd style="line-height: 0; width: 89%">
        <asp:TextBox ID="txtEditorContents" name="txtEditorContents" runat="server" TextMode="MultiLine" Height="400px" Width="1000px" ClientIDMode="Static ” </asp:TextBox>
    </dd>    

第八步驟：運行試試看紅色邊框中的別是顯示出的效果，三個字來形容（萌萌噠）

第九步：提交的后台怎么獲取編輯器輸入的值     ：通過textbox的id就可以得到如圖接下來你就可以存儲數據庫等等操作了

 

以上就是我的總結，如有不對之處還望見諒！