使用div + 剪贴板事件 = 简易编辑器

作者: 自律财富自由 | 来源:发表于2018-11-08 15:15 被阅读0次

使用div + 剪贴板事件 = 简易编辑器
2018-08-22
js使用clipboard，浏览器复制到粘贴板
JS实例-事件对象
js 实现markdown中直接粘贴图片
Word强大插件Writage使用手册
阻止事件冒泡
（vue）阻止click事件冒泡，防止触发另一个事件
复制文字时自动追加版权信息
RxBus 一个简易、非反射的Android事件通知库

说明：
支持在div内复制粘贴文字，支持像QQ截图，然后粘贴到div框内。
直接放代码：

<!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>fabric</title>
  <style>
    #textBox {
      width: 400px;
      min-height: 20px;
      /* max-height: 300px; */
      _height: 120px;
      margin-left: auto;
      margin-right: auto;
      padding: 3px;
      outline: 0;
      border: 1px solid #a0b3d6;
      font-size: 12px;
      line-height: 24px;
      padding: 2px;
      word-wrap: break-word;
      overflow-x: hidden;
      overflow-y: auto;
  
      border-color: rgba(82, 168, 236, 0.8);
      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
    }
  </style>
</head>
<body>
    <div id="textBox" contenteditable="true">
        window.clipBoardContent
    </div>
  <script>
      var textBox = document.getElementById('textBox')
      var defaultText = '自定义文本内容';

      document.addEventListener("paste", function (e) {
          console.log('触发paste事件 e = ', e)
          console.log('触发paste事件： = ', e.clipboardData.getData("text"));
          var clipboardData = e.clipboardData;
          if (!(clipboardData && clipboardData.items)) {//是否有粘贴内容
              return;
          }
          for (var i = 0, len = clipboardData.items.length; i < len; i++) {
              var item = clipboardData.items[i];
              if (item.kind === "string" && item.type == "text/plain") {
                  item.getAsString(function (str) {
                    console.log('文本内容： = ', str)
                      // str 是获取到的字符串,创建文本框
                      //处理粘贴的文字内容
                      textBox.innerHTML += str
                  })
              } else if (item.kind === "file") {//file 一般是各种截图base64数据
                  var pasteFile = item.getAsFile();
                  // pasteFile就是获取到的文件
                  var reader = new FileReader();
                  reader.onload = function (event) {
                      var base64Img = event.target.result;
                      // 将获取到的图片的base64码用来创建img元素，并插入到div内
                      var img = document.createElement('img')
                      img.src = base64Img
                      textBox.appendChild(img)
                  }; // data url  
                  reader.readAsDataURL(pasteFile);
              }
              var copy_content = e.clipboardData.getData('text/plain');
          }
      });
      //复制
      document.onkeydown = function (e) {
          if (e.ctrlKey && e.keyCode == 67) {//ctrl+C
            console.log('ctrl c')
            function handler(event) {
                event.clipboardData.setData('text/plain', defaultText);
                document.removeEventListener('copy', handler, true);
                event.preventDefault();
            }
            document.addEventListener('copy', handler, true);
            document.execCommand('copy');
          }
      }
      //粘贴  
      document.onkeydown = function (e) {
        if (e.ctrlKey && e.keyCode == 86) {//ctrl+V
          console.log('ctrl v = ', e)
          function handler(event) {
              event.clipboardData.getData('text/plain');  // 获取剪贴板的内容
              document.removeEventListener('paste', handler, true);
              event.preventDefault();
          }
          document.addEventListener('paste', handler, true);
          document.execCommand('paste');
        }
      }
  </script>
</body>
</html>