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

有一说一来讲 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>

我们运行项目

因为 contenteditable 单纯的输入内容肯定是没问题的

然后 我复制一段文本

粘贴进去

文本已经没有任何问题

然后我们来试图片

我们先试截个图

然后粘贴进去

直接进来 也是没有任何问题

然后 我们可以试试在百度图片上复制一个

然后拿过去粘贴

也是没有任何问题

当然 因为是手写的js 没有任何工具 BUG肯定会比较多 大家可能也需要自己慢慢完善

相关推荐
葡萄城技术团队12 小时前
浏览器为啥要对 JavaScript 定时器“踩刹车”?
javascript
我是ed12 小时前
# vue3 实现甘特图
前端
m0_6161884913 小时前
el-table的隔行变色不影响row-class-name的背景色
前端·javascript·vue.js
zheshiyangyang13 小时前
Vue3组件数据双向绑定
前端·javascript·vue.js
xw513 小时前
uni-app项目支付宝端Input不受控
前端·uni-app·支付宝
大翻哥哥13 小时前
Python上下文管理器进阶指南:不仅仅是with语句
前端·javascript·python
IT_陈寒14 小时前
React 性能优化必杀技:这5个Hook组合让你的应用提速50%!
前端·人工智能·后端
再吃一根胡萝卜14 小时前
Git 强制推送指南:新手必读的「危险操作」解析
前端
诚实可靠王大锤14 小时前
react-native项目通过华为OBS预签名url实现前端直传
前端·react native·华为
Monly2114 小时前
Vue:下拉框多选影响行高
前端·javascript·vue.js