欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

ueditor word 图片上传 有大用

ueditor word 图片上传

复制图片只有两种方式,一种是直接将图片上传到服务器,另一种是转成二进制流base64码
目前限制chrome浏览器使用
首先um-editor,比如:
打开umeditor的二进制流。 js,找到UM.plugins['autoupload'],然后找到autoUploadHandler方法,注释掉代码。
添加以下代码:

//判断剪贴板内容是否包含文本

//首先解释一下为什么要判断文本是否为空

//在 ctrl+c word 中的文字或图片会返回 1 种 (image/png) 或者 4 种类型(text/plain,text/html,text/rtf,image/png) 类型的对象

//为了兼容 4 两种格式的情况,做了如下判断

//以下代码:e.originalEvent.clipboardData.items 获取剪贴板的内容

//粘贴文字后文字不为空,还返回当前文字的图片类型

//如果有文字,不做任何处理,如果只粘贴图片,文字必须为空,包括复制的桌面图片或截图

var text = e.originalEvent.clipboardData.getData("text");

如果(文字==“”){

    var items=e.originalEvent.clipboardData.items;

     for (var i = 0, len = items.length; i < len; i++) {

        var item = items[i];

       if ( item.kind == 'file' && item.type.indexOf('image/') !== -1 ) {

         

              var blob = item.getAsFile();

              getBase64(blob,函数(base64){

              //sendAndInsertImage(base64,me); 上传到服务器

               setBase64Image(base64,me);

              });

              //屏蔽默认事件,避免重复添加;

              e.originalEvent.preventDefault();

             };

        }

}

两种方法:

//执行插入图片的操作

函数 setBase64Image(base64,editor){

    editor.execCommand('insertimage', {src: base64,_src: base64});

}

//获取base64

函数getBase64(blob,回调){

    var a = new FileReader();

    a.onload = function(e) {callback(e.target.result);};

    a.readAsDataURL(blob);

};

效果展示:

image.png

详细请参考这篇文章:http: //blog.ncmem.com/wordpress/2019/08/07/ueditor-word%e5%9b%be%e7%89%87%e4%b8%8a %e4%bc%a0/

发表于2019-08-05 14:15   Xproer-松鼠  阅读( 269 )评论( 0 )  编辑  收藏  报告

版权声明
本文为[webuploader1]所创,转载请带上原文链接,感谢
https://chowdera.com/2021/07/20210708154602289y.html


来自 https://chowdera.com/2021/07/20210727122848087D.html



普通分类: