【ASPNET】植入kindeditor的方法與小坑

下載下傳方法

1、搜尋kindeditor前往官網再前往github下載下傳

2、打不開試試把域名改成github.com.cnpmjs.org（阿裡雲的一種奇怪服務，估計是用了代理或者什麼的，反正可以）

3、懶人請前往這裡（CSDN下載下傳）免費下載下傳

下載下傳後請解壓檔案，然後請把標明的檔案複制到你的網站下的适當位置

再在存放kindeditor的根目錄下建立load.js（名字随便起，後面添加引用的時候别寫錯就行）

輸入代碼

KindEditor.ready(function (K) {
    var editor = K.create('#【這裡是要替換為kindeditor的控件的名字，後面會教怎麼填】', {
        //上傳管理
        uploadJson: 'kindeditor/asp.net/upload_json.ashx',
        //檔案管理
        fileManagerJson: 'kindeditor/asp.net/file_manager_json.ashx',
        allowFileManager: true,
        afterBlur: function () { this.sync(); },
        //設定編輯器建立後執行的回調函數
        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 (url) {
            alert(url);
        },
        //編輯器高度
        width: '100%',
        //編輯器寬度
        height: '450px;',
        //配置編輯器的工具欄
        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'
        ]
    });
    prettyPrint();
});
           

注意：裡面有個地方是要替換的，請注意檢視js代碼

在母版頁的head中添加引用

<link href="/kindeditor/plugins/code/prettify.css" rel="stylesheet" type="text/css" />
<script src="/【存放kindeditor的根目錄】/lang/zh-CN.js" type="text/javascript"></script>
<script src="/【存放kindeditor的根目錄】/kindeditor-all.js" type="text/javascript"></script>
<script src="/【存放kindeditor的根目錄】/plugins/code/prettify.js" type="text/javascript"></script>
<script src="/【存放kindeditor的根目錄】/load.js" type="text/javascript"></script>
           

注意：如果你建立的js不是叫做load.js，你就把他換成你所用的名字

在恰當的位置添加textarea或TextBox元件

<!--方案一-->
<textarea id="【請換成你喜歡的id】" runat="server" />
<!--方案二-->
<asp:TextBox TextMode="【請換成你喜歡的id】" runnat="server" ID="content" />
           

運作你的網站，打開添加了控件的網頁，可以發現，此時的kindeditor不能正常加載（原因是aspnet在編譯的時候會給你的控件名稱加字首或者字尾，導緻load.js中指定錯空間名而無法加載）

打開開發人員工具，定位到沒加載出kindeditor的控件

記下浏覽器中顯示的id，然後修改你的load.js中的控件名，再次運作網站

大功告成