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");
    }
    });

    }

    }
    }
    )
    }

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

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

  • 相关阅读:
    CentOS下通过yum安装svn及配置
    CentOS使用YUM安装php运行环境,包含php,php-fpm,nginx,mysql
    centos6.5直接yum安装nginx
    用Xshell设置CentOS密钥登录
    CentOS安装系统时硬盘分区建议
    jQuery.extend 函数详解
    jQuery自定义插件
    SVN常用命令
    iwebshop判断是不是微信打开,这样可能把微信支付显示出来
    Angularjs使用 ajax实例
  • 原文地址:https://www.cnblogs.com/redfull/p/9982625.html
Copyright © 2011-2022 走看看