在ASP.NET中使用KindEditor富文本編輯器

之前一直用百度的UEditor。此次客戶提了一個需求要在編輯器中插入Flash動畫，可是不知道怎麼用UEditor實現，因而選用了KindEditor。

更重要的一點是，客戶的網站使用Framework2.0，可是UEditor只支持4.0或更高的版本（舊版本很難找到了）。

下面講一下使用KindEditor的步驟

一、首先到官方網站下載最新版的UEditor

下載完成後解壓，目錄結構以下

能夠看到，EEditor支持各類後端語言進行開發，因爲咱們使用的是ASP.NET，因此打開ASP.NET文件夾。

這裏有兩個很重要的文件file_manager_json.ashx和upload_json.ashx，他們用來負責處理客戶端的文件上傳請求。bin目錄中有個LitJSON.dll類庫，用來對對象進行序列化和反序列化操做。

二、將UEditor引用到項目中

<link href="/Js/KindEditor/themes/default/default.css" rel="stylesheet" charset="utf-8" type="text/css" />
<script src="/Js/KindEditor/kindeditor-all.js" charset="utf-8" type="text/javascript"></script>
<script src="/Js/KindEditor/lang/zh-CN.js" charset="utf-8" type="text/javascript"></script>

三、初始化UEditor

首先要作一些準備工做，在html代碼中添加一個textarea用來當UEditor的容器。

<div class="divcontent">
     <textarea id="content1" cols="100" rows="8" style="width:700px;height:200px;visibility:hidden;" runat="server"></textarea>
</div>
<div class="divfooter">
     <input type="button" id="canceldoc" value="取消編輯" class="btnop" />
     <input type="button" id="savedoc" value="保存文檔" class="btnop"/>
</div>

全部的默認配置都在kindeditor-all.js文件中，若是你要對它們進行修改，能夠在初始化時進行設置。

KindEditor.ready(
     function (K) {
            editor = K.create('#content1', {
                //上傳處理程序的路徑
                uploadJson: '/js/KindEditor/asp.net/upload_json.ashx',
                imageSizeLimit: '10MB', //批量上傳圖片單張最大容量
                imageUploadLimit : 30, //批量上傳圖片同時上傳最多個數
                //文件管理處理程序的路徑
                fileManagerJson: '/js/KindEditor/asp.net/file_manager_json.ashx',
                allowFileManager: true,
                //要取值設置這裏 這個函數就是同步KindEditor的值到textarea文本框
                afterCreate: function () {
                    var self = this;
                    K.ctrl(document, 13, function () {
                        self.sync();
                        K('form[name=example]')[0].submit();
                    });
                    K.ctrl(self.edit.doc, 13, function () {
                        self.sync();
                        K('form[name=example]')[0].submit();
                    });
                },
                //上傳後執行的回調函數,獲取上傳圖片的路徑
                afterUpload: function (data) {
                    alert(data);
                },
                //同時設置這裏  
                afterBlur: function () {
                    this.sync();
                },
                width: '1000px;',
                height: '500px;',
                //編輯工具欄
                items: [
                'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
                'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
                'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
                'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
                'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
                'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
                'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
                'anchor', 'link', 'unlink', '|', 'about'
                ]
            });
        });

 四、設置和獲取KindEditor的數據

關於設置和獲取能夠參考官方給出的示例

下面是我在項目中用到的代碼

$("#savedoc").click(function () {
        if (confirm("是否要保存文檔？")) {
            if ($("#txttitle").val() == "") { alert("文檔標題不能爲空！"); return false; }
            if (editor.html() == "") { alert("文檔內容不能爲空！"); return false; }var articleid = params.articleid;
            $.post("../AjaxServer/ChannelServ.ashx", { method: "commitarticle",
                                                       content: editor.html(), 
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 　 title: $("#txttitle").val(),
                                                       articleid: articleid }, function (data) {
                if (data != "") {
                    alert("保存成功！");
                    location.href = 'articlelist.aspx?articleid=" + data;
                } else {
                    alert("保存失敗！");
                }
            });
        }
});

$.get("../AjaxServer/ChannelServ.ashx", { method: "getarticlebyid", articleid: params.articleid }, function (data) {
      var json = $.parseJSON(data);
      if ($.parseHTML(json.Table[0].Content)[0].data) {
           $("#txttitle").val(json.Table[0].Title);
           editor.html($.parseHTML(json.Table[0].Content)[0].data);
      } else {
           $("#txttitle").val(json.Table[0].Title);
           editor.html(json.Table[0].Content);
      }
});

還有一點在開發時遇到的問題記錄一下，在上傳文件時會提示上傳目錄不存在的錯誤。打開upload_json.ashx查看後臺代碼發現沒有設置好上傳路徑

//文件保存目錄路徑
String savePath = "../attached/";

//文件保存目錄URL
String saveUrl = aspxUrl + "../attached/";

最後讓咱們看一下KindEditor的效果