实现div 变成输入框并可复制图片进来

问题描述：

需要做一个类似聊天的输入框，可以复制文字，复制图片

解决方案：

div 设置属性 contenteditable 以及复制粘贴设置 @paste="handlePaste"

HTML 代码：

<div class="reply-box" v-if="isReply">
      <div
        class="reply-input beauty-scroll"
        contenteditable
        ref="editableDiv"
        id="editBox"
        row="3"
        @paste="handlePaste"
         @focus="onFocusEditableDiv"
         @click="showImageModal"
      ></div>
      <div class="reply-btm">
        <!-- 必须使用button 按钮能够保持焦点在当前位置的原因是它是一个可聚焦的元素，并且浏览器默认会保留焦点在其上；只有一个图片，焦点会跑到最前面 -->
        <a-button class="sendImg-btn">
          <img src="../../../../assets/img/sendImg.png" alt="" class="sendImg" @click="selectImg">
        </a-button>
        <a-button class="reply-btn" type="primary" size="small" @click="sendMessage" :loading="loading">发送</a-button>
      </div>
    </div>

　JS 代码：

100

101

102

103

/**
 * 粘贴图片
 */
async handlePaste(event) {
  event.preventDefault(); // 阻止默认的粘贴行为
  const clipboardData = event.clipboardData || window.clipboardData;
  const types = clipboardData.types;
  if (types.includes("text/plain")) {
    try {
      const clp = await navigator.clipboard.readText();
      // 将纯文本插入到可编辑区域
      this.insertPlainText(clp);
    } catch (error) {
      console.error("Failed to read clipboard contents: ", error);
    }
  }
  if (types.includes("Files")) {
    for (let index = 0; index < clipboardData?.files.length; index++) {
      const file = clipboardData?.files[index];
      const isXls = /\.(jpg|png|jpeg)$/.test(file.name.toLowerCase());
      if (isXls) {
        let options = {
          file: file,
        }
        this.uploadImg(options)
      }
    }
  }
},
//插入纯文本   document.execCommand 已被弃用 换成这种方式
insertPlainText(text) {
  const selection = window.getSelection();
  if (selection.getRangeAt && selection.rangeCount) {
    const range = selection.getRangeAt(0);
    const doc = range.commonAncestorContainer.ownerDocument;
    range.deleteContents();
    const textNode = doc.createTextNode(text);
    range.insertNode(textNode);
    range.setStartAfter(textNode);
    range.setEndAfter(textNode);
    selection.removeAllRanges();
    selection.addRange(range);
  }
},
//插入图片
insertImageIntoFocusedDiv(url) {
  const focusedElement = document.activeElement;
  if (
    focusedElement.tagName.toLowerCase() === "div" &&
    focusedElement === this.$refs.editableDiv
  ) {
    this.insertImage(focusedElement, url);
  } else {
    console.log("没有找到合适的可编辑 div");
  }
},
insertImage(element, url) {
  const selection = window.getSelection();
  const range = selection.getRangeAt(0);
  const imgElement = document.createElement("img");
  imgElement.src = url;
  imgElement.style.width = "100px";
  imgElement.style.verticalAlign = "baseline";
  imgElement.style.cursor = "zoom-in";
  range.insertNode(imgElement);
  // 更新光标位置
  const newRange = document.createRange();
  newRange.setStartAfter(imgElement);
  newRange.collapse(true);
  selection.removeAllRanges();
  selection.addRange(newRange);
},
//选择图片
selectImg() {
  this.$refs.editableDiv.focus(); // 确保焦点在可编辑的 div 上
  document.querySelector(".avatar-uploader input").click();
},
// 上传前校验
async beforeUpload(file) {
  const isXls = /\.(xls|jpg|png|jpeg)$/.test(file.name.toLowerCase());
  const isLt20M = file.size / 1024 / 1024 < 20;
  return new Promise((resolve) => {
    if (!isXls) {
      this.$message.error("请上传正确格式的文件!");
      return false;
    }
    if (!isLt20M) {
      this.$message.error("请上传小于20M的文件!");
      return false;
    }
    resolve(true);
    return true;
  });
},
//图片上传之后
async uploadImg(options) {
  let result = await this.uploadFile(options.file);
  let protocol = window.location.protocol; //协议
  let domain = window.location.hostname; // 域名
  let port = window.location.port ? `:${window.location.port}` : ""; // 端口号
  const URL = protocol + "//" + domain + port + "/aldApi" + result.filePath;　　　　//这里拿到文件之后，可根据自己需求来进行文件处理，处理完之后，插入输入框
  this.insertImageIntoFocusedDiv(URL);
},