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肯定会比较多 大家可能也需要自己慢慢完善

相关推荐
GISer_Jing几秒前
前端面试常考题目详解
前端·javascript
Boilermaker19921 小时前
【Java EE】SpringIoC
前端·数据库·spring
中微子1 小时前
JavaScript 防抖与节流:从原理到实践的完整指南
前端·javascript
天天向上10241 小时前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
芬兰y2 小时前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁2 小时前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
小蜜蜂dry2 小时前
Fetch 笔记
前端·javascript
拾光拾趣录2 小时前
列表分页中的快速翻页竞态问题
前端·javascript
小old弟2 小时前
vue3,你看setup设计详解,也是个人才
前端
Lefan2 小时前
一文了解什么是Dart
前端·flutter·dart