1.contenteditable了解属性

contentEditable：html标签的一个属性。设置标签的contentEditable="true"时，即可开启该元素的编辑模式。

2.使用场景：

需要向父元素里面添加自定义标签时

3.demo代码（全部代码）：结合实际场景进行代码修改

<template>
  <div class="box">
    <div id="edit" ref="edit" contenteditable @click="editClick">{{content}}</div>
    <div class="user">
        <span
        class="zone"
        v-for="item in spanList"
        :key="item.id"
        @click="spanClick(item.label)"
        >{{item.value}}</span>
        <br />
        <input type="text" ref="newsContent" id="newsContent" placeholder="请输入消息" />
        <button id="newsBtn" ref="newsBtn" @click="btnClick">发送消息</button>
        
    </div>
  </div>
</template>
 
<script lang="ts" setup>
import { ref } from "@vue/reactivity";
// 定义div绑定值
let content = "可编辑的DIV";
// 定义鼠标光标值
let lastEditRange = null;
// 定义DIV真实dom
let edit = ref();
// 定义input框真实dom
let newsContent = ref();
// 定义按钮真实dom
let newsBtn = ref();
let spanList = [
  {
    id: 1,
    label: "eat",
    value: "吃饭"
  },
  {
    id: 2,
    label: "sleep",
    value: "睡觉"
  },
  {
    id: 3,
    label: "beans",
    value: "打豆豆"
  }
];
// div的点击回调
let editClick = () => {
  // 获取选定对象
  let selection = getSelection();
  // 设置最后光标对象
  lastEditRange = selection.getRangeAt(0);
};
// 按钮的点击回调
let btnClick = () => {
  // 获取输入框
  let newsContent = document.getElementById("newsContent");
  // 编辑框获得焦点
  edit?.value?.focus();

  // 获取选定对象
  var selection = getSelection();
  // 如果保存的有上次的光标对象
  if (lastEditRange) {
    // 清除所有选区
    selection.removeAllRanges();
    // 添加最后光标还原之前的状态
    selection.addRange(lastEditRange);
  }
  // 如果选定对象范围是编辑框范围
  if (selection.anchorNode.nodeName != "#text") {
    // 创建表情文本节点进行插入
    var emojiText = document.createTextNode(newsContent.value);
    // 如果文本框的子元素大于0，则表示有其他元素，则按照位置插入表情节点
    if (edit.childNodes.length > 0) {
      for (var i = 0; i < edit.childNodes.length; i++) {
        if (i == selection.anchorOffset) {
          edit.insertBefore(emojiText, edit.childNodes[i]);
        }
      }
    } else {
      // 否则直接插入一个表情元素
      edit.appendChild(emojiText);
    }
    // 创建新的光标对象
    var range = document.createRange();
    // 将光标对象的范围界定为新建的表情节点
    range.selectNodeContents(emojiText);
    // 定位光标位置在表情节点的最大长度位置
    range.setStart(emojiText, emojiText.length);

    // 将选区折叠为一个光标
    range.collapse(true);
    // 清除所有光标对象
    selection.removeAllRanges();
    // 添加新的光标对象
    selection.addRange(range);
    // 如果选定对象范围是文本节点
  } else {
    // 获取光标对象
    var range = selection.getRangeAt(0);
    // 获取光标对象的范围界定对象，一般就是textNode对象
    var textNode = range.startContainer;
    // 获取光标位置
    var rangeStartOffset = range.startOffset;
    // 在光标位置处插入新的表情内容
    textNode.insertData(rangeStartOffset, newsContent.value);
    // 添加了新内容，将光标移动到新的位置
    range.setStart(textNode, rangeStartOffset + newsContent.value.length);

    // 将选区折叠为一个光标
    range.collapse(true);
    // 清除所有光标对象
    selection.removeAllRanges();
    // 添加新的光标对象
    selection.addRange(range);
  }
  // 记录最后光标对象
  lastEditRange = selection.getRangeAt(0);
};

// span 点击回调
let spanClick = (val: any) => {
  // 获取选定对象
  var selection = getSelection();
  // 如果保存的有上次的光标对象
  if (lastEditRange) {
    // 清除所有选区
    selection.removeAllRanges();
    // 添加最后光标还原之前的状态
    selection.addRange(lastEditRange);

    // 获取光标对象
    var range = selection.getRangeAt(0);
    // 获取光标对象的范围界定对象，一般就是textNode对象
    var textNode = range.startContainer;
    // 获取光标位置
    var rangeStartOffset = range.startOffset;

    let el = document.createElement("div");
    let span = document.createElement("span");
    span.style.cssText =
      "display: inline-block;font-size: 12px;border-radius: 4px;color: #0590DF;background-color: rgba(5, 144, 223, 0.0980392156862745);width:50px;line-height:20px;height:20px;text-align:center";
    span.setAttribute("contenteditable", "false");
    el.appendChild(span);
    el.appendChild(document.createTextNode("\u200b")); // 非法字符错误：零度空间（空格）
    spanList.map(item => {
      if (item.label === val) {
        return (content = item.value);
      }
    });
    span.innerHTML = content ? content : "";
    var frag = document.createDocumentFragment(),
      node,
      lastNode;
    while ((node = el.firstChild)) {
      lastNode = frag.appendChild(node);
    }
    // 在光标位置处插入新的表情内容
    range.insertNode(frag);
    // 添加了新内容，将光标移动到新的位置
    if (lastNode) {
      range = range.cloneRange();
      range.setStartAfter(lastNode);
      range.collapse(true);
      selection?.removeAllRanges();
      selection?.addRange(range);
    }
    // 记录最后光标对象
    lastEditRange = selection.getRangeAt(0);
  } else {
      return 
  }
};
</script>
 
<style scoped lang="scss">
.box {
    display: flex;
    height: 400px;
    justify-content: center;
    align-items: center;
}
#edit {
    height: 200px;
    width: 300px;
    border: 1px solid #ccc;
    margin-right: 30px;
    margin-bottom: 20px;
}
button {
  margin-left: 20px;
}
.zone {
  margin: 10px;
  display: inline-block;
  color: #08e43ffa;
  cursor: pointer;
}
</style>

4.运行结果 

        初始页面

vue designer 加前缀 vue editable_html5

         操作后的实际页面（一部分）

 

vue designer 加前缀 vue editable_vue.js_02