可编辑的div，让其只能粘贴文字和图片

有时候我们粘贴界面上的东西，会自动转为html格式的带样式的内容，很不方便，我们只需要文本和图片。下面代码可以解决此问题

 <div
      class="editor"
      ref="divRef"
      contenteditable
      @paste="optimizePasteEvent"
      @keyup="handleKeyUp"
      @keydown="handleKeyDown"
      @keyup.enter="sendSSEMessage"
    ></div>




optimizePasteEvent(e){
      event.preventDefault();

      const clipboardData = (event.clipboardData || event.originalEvent.clipboardData);
      let items = clipboardData.items;
      let dedalock = 1;
      const target = this.$refs.divRef;
      for (const item of items) {
        if(dedalock == 2) {
          break
        }else if(dedalock == 1) {
          dedalock = 2;
        }
        if (item.kind === 'file' && item.type.indexOf('image/') !== -1) {
          const file = item.getAsFile();
          const reader = new FileReader();

          reader.onload = () => {
            const img = document.createElement('img');
            img.src = reader.result;
            target.appendChild(img);
          };

          reader.readAsDataURL(file);
        } else if (item.kind === 'string') {
          item.getAsString((text) => {
            const regex = /<img src="(.*?)"/;
            const match = text.match(regex);

            if (match) {
              const img = document.createElement('img');
              img.src = match[1];
              target.appendChild(img);
            } else {
              console.log(text);
              document.execCommand('insertText', false, text);
            }
          });
        }
      }
    },

粘贴复制 完美解决。

这个解决方法也是从另外一个博主那发现的，谢谢。

html+js写一个可编辑的元素 支持直接向上粘贴文本或图片_html 粘贴图片-CSDN博客