如何实现让编辑支持word内容和截图的复制黏贴

吐槽君 分类:实例代码

chrome有很多人性化的API,比如拖拽, 比如图片可以转化为base64等;

让编辑器支持word的复制黏贴:

其中图片会转化为base64编码, 如果是通过远程打开这个静态页, 黏贴word文档的时候, 图片不会黏贴进来, 因为远程地址无法访问本地磁盘的绝对路径, 如果把下面代码保存成静态界面打开, 那么word中的图片都可以看见, 而且都会被转化为base64编码。

编辑器支持截屏的黏贴:

让编辑器支持图片直接拖拽, 直接拖拽即可添加图片, 功能更加强大, 而且图片也是base64编码。使用的话这new Edit(), 参数为一个可编辑的元素, 比如有contenteditable属性的div或者iframe元素等:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
</head>
<body>
<script src="http://cdn.bootcss.com/jquery/1.9.0/jquery.js"></script>
<div id="edit" contenteditable="true" style="width:400px;height:400px;border:1px solid #f00"></div>
<script>
function Edit(editEl) {
  editEl = $(editEl);
  $(editEl).bind("paste", clipFn);
  function clipFn(ev) {
    //把剪贴板中的img通过canvas中专为base64字符串;
    var canvas = document.createElement("canvas");
    var context = canvas.getContext("2d");
    //从word拷贝时候会得到text/html数据;
    var html = $(ev.originalEvent.clipboardData.getData("text/html"));
    html.find("img").each(function () {
      var img = document.createElement("img");
      var src = $(this).attr("src"); //.replace(/\/gi,"\/");
      var _this = this;
      img.src = src;
 
      img.onload = function () {
        canvas.width = img.width;
        canvas.height = img.height;
        context.drawImage(img, 0, 0, img.width, img.height);
        var dataBase64 = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
        $("img").each(function (index, el) {
          //匹配图片;
          if ($(this).attr("src").replace(/[\/\]/g, "") === src.replace(/[\/\]/g, "")) {
            el.src = dataBase64;
          };
        });
        img.onerror = function () {
          console.log("图片加载失败");
        };
        img.onload = null;
      };
    });
 
    //如果通过截图或者复制图片的方式会得到  type为"imgage"的图片;
    var ele = ev.originalEvent.clipboardData.items;
    for (var i = 0; i < ele.length; ++i) {
      if (ele[i].kind == 'file' && ele[i].type.indexOf('image/') !== -1) {
        var blob = ele[i].getAsFile();
        readBlobAsDataURL(blob, function (base64) {
          var img = document.createElement('img');
          img.setAttribute('src', base64);
          editEl.append(img);;
        });
        //阻止默认事件, 避免重复添加;
        ev.originalEvent.preventDefault();
      };
    };
  };
 
  //绑定拖拽事件
  //要给个响应
  editEl.bind("dragover", function () {
    return false;
  });
 
  //触发事件的响应
  editEl.bind("drop", function (ev) {
    loadImage(ev.originalEvent.dataTransfer.files[0], function (result) {
      editEl.append("<img src=" + result + " />");
    });
    return false;
  });
 
  // 加载 图像文件(url路径)
  function loadImage(src, callback) {
    // 过滤掉 非 image 类型的文件
    if (!src.type.match(/image.*/)) {
      if (window.console) {
        console.log("选择的文件类型不是图片: ", src.type);
      }
      else {
        window.confirm("只能选择图片文件");
      }
      return;
    }
 
    // 创建 FileReader 对象 并调用 render 函数来完成渲染.
    var reader = new FileReader();
    // 绑定load事件自动回调函数
    reader.onload = function (e) {
      // 调用前面的 render 函数
      callback(e.target.result);
    };
    // 读取文件内容
    reader.readAsDataURL(src);
  };
 
  function readBlobAsDataURL(blob, callback) {
    var a = new FileReader();
    a.onload = function (e) { callback(e.target.result); };
    a.readAsDataURL(blob);
  };
};
</script>
<script>
new Edit("#edit");
</script>
</body>
</html>

很多网上的编辑器里 对图片的支持单一, 都会考虑IE6, IE7,  ff, chrome, 各种兼容问题。

这个解决方案适合基于chrome内核的浏览器, FF的兼容没有处理, 因为所有的图片数据都是基于base64, 图片就没有上传这一说法了,图片都变成了字符串, 不过这个有个劣势就是每一次提交的数据都会比较大。

如何实现让编辑支持word内容和截图的复制黏贴,这样的场景在实际项目中还是用的比较多的,关于如何实现让编辑支持word内容和截图的复制黏贴就介绍到这了。

如何实现让编辑支持word内容和截图的复制黏贴属于前端实例代码,有关更多实例代码大家可以查看

如何实现让编辑支持word内容和截图的复制黏贴

回复

我来回复
  • 暂无回复内容