zoukankan      html  css  js  c++  java
  • kindeditor 富文本直接粘贴图片功能实现

    实例代码如下:

    afterCreate: function () {
    var editerDoc = this.edit.doc;//得到编辑器的文档对象
    //监听粘贴事件, 包括右键粘贴和ctrl+v
    $(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: '../Include/upload_ajax.ashx?action=EditorFile&IsWater=1',
    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.info(imgTag);
    //kindeditor提供了一个在焦点位置插入HTML的函数,调用此函数即可。
    editor.insertHtml(imgTag);


    },
    error: function (responseStr) {
    console.log("error");
    }
    });

    }

    }
    }
    )
    }

    //////////////////////////////////////代码结束

    ///////代码粘贴位置

  • 相关阅读:
    array_map()与array_shift()搭配使用 PK array_column()函数
    Educational Codeforces Round 8 D. Magic Numbers
    hdu 1171 Big Event in HDU
    hdu 2844 poj 1742 Coins
    hdu 3591 The trouble of Xiaoqian
    hdu 2079 选课时间
    hdu 2191 珍惜现在,感恩生活 多重背包入门题
    hdu 5429 Geometric Progression 高精度浮点数(java版本)
    【BZOJ】1002: [FJOI2007]轮状病毒 递推+高精度
    hdu::1002 A + B Problem II
  • 原文地址:https://www.cnblogs.com/redfull/p/9982625.html
Copyright © 2011-2022 走看看