kindeditor的使用心得

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

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

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

kindeditor的使用心得

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

kindeditor的使用心得

三、修改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>


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

kindeditor的使用心得

五、使用时遇到的问题:

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

  编辑框的显示:

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

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

示例:

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

图片的尺寸:

kindeditor的使用心得

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

kindeditor的使用心得

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

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

kindeditor的使用心得

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

相关文章:

  • 2021-06-15
  • 2021-12-07
  • 2021-05-11
  • 2021-07-01
  • 2021-09-14
  • 2021-10-26
  • 2021-08-03
猜你喜欢
  • 2022-12-23
  • 2021-07-29
  • 2021-06-18
  • 2021-11-14
  • 2021-09-09
相关资源
相似解决方案