wangEditor粘贴word图片且图片文件自动上传功能

图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码
目前限chrome浏览器使用
首先以um-editor的二进制流保存为例:
打开umeditor.js,找到UM.plugins['autoupload'],然后找到autoUploadHandler方法,注释掉其中的代码。
加入下面的代码:

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

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

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

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

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

//当粘贴了文本之后text是不为空的,同时也会返回当前文本的图片类型

//如果有文字的话不做任何的处理,如果只粘贴图片的话文本一定是空的,包括复制的桌面图片或者截图的图片

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

if(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, function( base64 ) {

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

               setBase64Image(base64,me);

              });

              //阻止默认事件, 避免重复添加;

              e.originalEvent.preventDefault();

             };

        }

}

两个方法:

//执行插入图片的操作

function setBase64Image(base64,editor){

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

}

//获得base64

function  getBase64(blob, callback) {

    var a = new FileReader();

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

    a.readAsDataURL(blob);

};

效果展示:

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

讨论群:223813913

软件介绍xhEditor是一个基于jQuery开发的简单迷你并且高效的可视化XHTML编辑器,基于网络访问并且兼容IE 6.0-8.0,Firefox 3.0,Opera 9.6,Chrome 1.0,Safari 3.22。Features(特点): Small:初始加载5个文件,包括:1个js(36k)+2个css(6k)+2个图片(4k),总共46k。若js和css文件进行gzip压缩,可以进一步缩减为18k左右。 Fast:基于jQuery引擎开发,提供高效的代码执行效率 Simple:简单的调用方式,加一个class属性就能将您的textarea立马变成一个功能丰富的可视化编辑器。 Word:实现Word代码自动检测并清理,提供高效完美的Word代码过滤方案,生成代码最优化精简,但是却不丢失任何细节效果。 UBB: 提供完美的UBB可视化编辑解决方案,在您获得安全高效代码存储的同时,又能享受可视化编辑的便捷 ver 0.9.7 Change(2009-7-21) 1.调整:标签显示功能由原先的显示在左上方并增高8像素,改为显示在右上方且不增高 2.调整:编辑器内部的settings变量由原先的内部变量改为公有变量,以方便从外部动态的对参数进行修改 3.修正:修正了Chrome浏览器下字体效果转换错误的问题,此问题仅出现在0.9.6版中 4.修正:在非WebKit内核下,使用3个字符的16进制颜色值无效的问题进行了修正,例:<span xss=removed>aaa</span> 5.修正:appendHTML和pasteHTML两个函数添加的图片或者链接,相对地址变绝对地址问题的修正 6.修正:XHTML格式化功能进一步完善,例:<b>aaa<bbb>,修正前<bbb这部分内容会消失,修正后此BUG消失 7.修正:之前表情插入后默认是选中当前表情,现修正为插入表情后光标定位在表情之后,这样便于在后面继续插入新表情 8.添加:ajax上传功能模块化,使链接、动画和视频在不增加代码大小的情况下都具备上传功能 9.添加:在readonly只读模式下除了全屏和关于按钮可用,其它所有按钮都禁用,并且内容不可编辑,可通过toggleReadonly接口来进行切换状态 10.添加:showModal接口,模仿桌面程序的模式窗口,必需完成窗口内事件或者关闭窗口才能返回窗口,本程序已扩展到ajax上传模块中,并可在插件中调用
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值