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

-耿瑞-2023-09-19 9:09

有一说一来讲 CSDN 博客的编辑器还是非常厉害的

能够完美设配图片与文字的粘贴与输入

但其实如果做个捡漏版的 js也可以完成

但这里为了方便我选择了vue2的环境

参考代码如下

html 复制代码

<template>
  <div class="editable-div" contenteditable="true" @paste="handlePaste" ref="editableDiv"></div>
</template>

<script>
export default {
  methods: {
    handlePaste(event) {
      event.preventDefault();

      const clipboardData = (event.clipboardData || event.originalEvent.clipboardData);
      let items = clipboardData.items;
      let dedalock = 1;
      const target = this.$refs.editableDiv;
      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') {
          debugger
          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);
            }
          });
        }
      }
    }
  }
};
</script>

<style scoped>
.editable-div {
  border: 1px solid #ccc;
  padding: 10px;
  min-height: 100px;
}
</style>