评论

收藏

[jQuery] 如何将word图片粘贴到百度富文本编辑器里面

开发技术 开发技术 发布于:2021-07-08 12:57 | 阅读数:301 | 评论:0

  
如何将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;
  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);
  };
  

  
关注下面的标签,发现更多相似文章