kindeditor的使用心得

kindeditor的使用心得

因需要寻找编辑器控件，搜索万千总算找到一款满意的编辑器即kindeditor，以下是第一次使用kindeditor的心得及所遇到的问题：

一、官网下载：http://kindeditor.net/down.php

二、下载下来有多种语言课根据需要选择自己的语言：并引入自己的项目中

注：attached,为图片及文件上传存放的路径需要自己建立。

三、修改js中的后端访问路径

    kindeditor-all.js中所有的访问路径：

asp.net/file_manager_json.ashx和asp.net/upload_json.ashx

四、前端页面引入对应的js文件：

 <link href="themes/default/default.css" rel="stylesheet" />
    <script src="kindeditor-all-min.js"></script>

    <script src="lang/zh-CN.js"></script>

<textarea name="Contents" id="Contents" style="width:600px;height:450px;"></textarea>

    <script>
          //编辑器
    var KE;
    KindEditor.ready(function (K) {
        KE = K.create('#Contents', {
            allowFileManager: true, //浏览图片空间
            filterMode: false, //HTML特殊代码过滤
            afterBlur: function () { this.sync(); }, //编辑器失去焦点(blur)时执行的回调函数（将编辑器的HTML数据同步到textarea）
            afterUpload: function (url, data, name) { //上传文件后执行的回调函数，必须为3个参数
                if (name == "image" || name == "multiimage") { //单个和批量上传图片时
                    var img = new Image(); img.src = url;
                    img.onload = function () { //图片必须加载完成才能获取尺寸
                        if (img.width > 100) {
                            KE.html(KE.html().replace('<img src="' + url + '" width="100" height="100"/>', '<img src="' + url + '" width="100" height="100px"/>'))
                            //KE.html(KE.html().replace('<img src="' + url + '" width="300"/>', '<img src="' + url + '" width="300"/>'))
                        }
                   
                    }
                }
            }
        });
        KindEditor.create('#Contents', { allowImageUpload: false, resizeType: 1, width: "600px", height: "300px" });
    });

    </script>

以上步骤即可完成编辑器的展示，并实现图片上传功能。

五、使用时遇到的问题：

  在使用时遇到编辑框的显示及编辑器中的图片的尺寸问题：

  编辑框的显示：

编辑器的宽度，可以设置px或%，比textarea输入框样式表宽度优先度高。

• 数据类型: String
• 默认值: textarea输入框的宽度

示例:

K.create('#id', {
        width : '700px'
});

图片的尺寸：

图片的尺寸可以在js中添加修改，但我试了.net的不好使，后来我百度得知：upload_json.ashx是处理上传文档的于是我就在后端代码就进行了图片尺寸控制：

还发现，客户在自己编辑时也可自己调整图片的大小：

选中编辑器中的图片右击属性就可以修改图片尺寸。

以上为我自己在使用过程中根据自己的需求修改的内容，希望可以帮到和我有同样需求的朋友，谢谢！