Kindeditor富文本粘贴图片，处理成路径存储方式

Kindeditor官方文档：http://kindeditor.net/docs/option.html#pasteType

Kindeditor内部有直接粘贴图片到文本框内的操作，为pasteType属性，可供选择的参数有 [ 0, 1, 2 ] 。

• 0：禁止粘贴,
• 1：纯文本粘贴,
• 2：HTML粘贴（默认值）

但是，默认操作会使得图片以二进制格式显示到输入框内，提交内容中的图片如果不进行处理那就直接存储到数据库中，那体量是相当庞大的，于是乎网上一顿搜寻，终于找到合适的处理方式。

主要设置两个属性值：

• pasterType: 1
• afterCreate: function() { … }

话不多说，上代码，详细看注释内容：

KindEditor.ready(function (K) {
    var editor = K.create('#editor', {
        cssPath: '/js/kindeditor/plugins/code/prettify.css',
        uploadJson: '/Generalhandlingevent/upload_json.ashx?action=EditorFile&IsWater=1',
        fileManagerJson: '/Generalhandlingevent/file_manager_json.ashx',
        themeType: 'simple',
        pasteType: 1,   //0:禁止粘贴, 1:纯文本粘贴, 2:HTML粘贴
        afterCreate: function () {
            var editerDoc = this.edit.doc;//得到编辑器的文档对象
            $(editerDoc).bind('paste', null, function (e) {
                /*获得操作系统剪切板里的项目，e即kindeditor,
                 *kindeditor创建了originalEvent(源事件)对象，
                 *并指向了浏览器的事件对象，而chrome浏览器
                 *需要通过clipboardData(剪贴板数据)对象的items
                 *获得复制的图片数据。
                 */
                var ele = e.originalEvent.clipboardData.items;
                for (var i = 0; i < ele.length; ++i) {
                    //判断文件类型
                    if (ele[i].kind == 'file' && ele[i].type.indexOf('image/') !== -1) {
                        var file = ele[i].getAsFile();//得到二进制数据
                        //创建表单对象，建立name=value的表单数据。
                        var formData = new FormData();
                        formData.append("imgFile", file);//name,value

                        //用jquery Ajax 上传二进制数据
                        $.ajax({
                            url: '/Generalhandlingevent/upload_json.ashx?action=EditorFile&IsWater=1',//dir=image
                            type: 'POST',
                            data: formData,
                            // 告诉jQuery不要去处理发送的数据
                            processData: false,
                            // 告诉jQuery不要去设置Content-Type请求头
                            contentType: false,
                            dataType: "json",
                            beforeSend: function () {
                                //console.log("正在进行，请稍候");
                            },
                            success: function (responseStr) {
                                //上传完之后，生成图片标签回显图片，假定服务器返回url。
                                var src = responseStr.url;
                                var imgTag = "<img src='" + src + "' border='0'/>";
                                console.log(editor.html());
                                //console.info(imgTag);
                                //kindeditor提供了一个在焦点位置插入HTML的函数，调用此函数即可。
                                editor.insertHtml(imgTag);
                            },
                            error: function (responseStr) {
                                console.log("error");
                            }
                        });
                    }
                }
            })
        },
        items: [
            'source', 'undo', 'redo', '|', "formatblock", 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
            'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
            'insertunorderedlist', '|', 'emoticons', 'image', 'link', '|', 'fullscreen']
    });

这样就能解决截屏粘贴图片数据量庞大的问题，同时，也不会让步骤复杂…