【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中的控件名，再次运行网站

大功告成