JS实现富文本粘贴图片

最新推荐文章于 2024-08-14 18:21:51 发布

转载最新推荐文章于 2024-08-14 18:21:51 发布 · 2.2k 阅读

js 专栏收录该内容

14 篇文章

订阅专栏

1.实现原理

利用html中 contenteditable 属性+JS判断

2.代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div class="editable" id="richedit" contenteditable>111111111</div>
  <script>
    //监听粘贴事件
    document.querySelector('#richedit').addEventListener('paste', function (e) {
      var cbd = e.clipboardData;
      console.log(cbd)
      var ua = window.navigator.userAgent;
      if (!(cbd && cbd.items)) {
        return;
      }
      //判断浏览器
      if (cbd.items && cbd.items.length === 2 && cbd.items[0].kind === 'string' && cbd.items[1].kind === 'file' && cbd.types && cbd.types.length === 2 && cbd.types[0] === 'text/plain' && cbd.typesp[1] === 'Files' && ua.match(/Macintosh/i) && Number(ua.match(/Chrome\/(\d{2})/i)[1]) < 49) {
        return;
      }
      //判断是图片渲染
      for (var i = 0; i < cbd.items.length; i++) {
        var item = cbd.items[i];
        if (item.kind == 'file') {
          var blob = item.getAsFile();
          if (blob.size === 0) {
            return;
          }
          var reader = new FileReader();
          var imgs = new Image();
          imgs.file = blob;
          reader.onload = (function (aImg) {
            return function (e) {
              aImg.src = e.target.result;
            }
          })(imgs)
          reader.readAsDataURL(blob)
          document.querySelector('#richedit').appendChild(imgs)
        }
      }
    }, false)
  </script>
</body>

</html>