<div id="insertHTML" contenteditable="true" />

<div @click="setImg" unselectable="on" onmousedown="return false;">点击</div>

<script>
  function setImg() {
    // console.log(11111);
    let imgSrc =
      'https://b03-pre-images.we-pj.net/image/20210115/e416ba76-6393-4127-90a5-fc0f9ff9013c.png?316x184';
    const imgTag = `<img src="${imgSrc}" width="28px" height="28px">`;
    // document.execCommand("insertHTML", true, imgTag);
    //  let imgTag = `<p><img src=${eidtorImg.src} /></p>`;
    insertContent(imgTag);
  }
  function insertContent(content) {
    if (!content) {
      //如果插入的内容为空则返回
      return;
    }
    let sel = null;
    if (document.selection) {
      //IE9以下
      sel = document.selection;
      sel.createRange().pasteHTML(content);
    } else {
      sel = window.getSelection();
      if (sel.rangeCount > 0) {
        let range = sel.getRangeAt(0); //获取选择范围
        range.deleteContents(); //删除选中的内容
        let el = document.createElement('div'); //创建一个空的div外壳
        el.innerHTML = content; //设置div内容为我们想要插入的内容。
        let frag = document.createDocumentFragment(); //创建一个空白的文档片段，便于之后插入dom树

        let node = el.firstChild;
        let lastNode = frag.appendChild(node);
        range.insertNode(frag); //设置选择范围的内容为插入的内容
        let contentRange = range.cloneRange(); //克隆选区
        contentRange.setStartAfter(lastNode); //设置光标位置为插入内容的末尾
        contentRange.collapse(true); //移动光标位置到末尾
        sel.removeAllRanges(); //移出所有选区
        sel.addRange(contentRange); //添加修改后的选区
      }
    }
  }
</script>

完整

https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=%E7%A6%81%E6%AD%A2%E7%A7%BB%E5%8A%A8%E7%AB%AF%E5%BC%B9%E5%87%BA%E9%94%AE%E7%9B%98&fenlei=256&rsv_pq=f2cec795000f7260&rsv_t=7a41a3NFeXcNB0WYT4RdfISlk7ERz23q4vnrcOujOBgfVlNFa55N5kXSu%2FY&rqlang=cn&rsv_enter=1&rsv_dl=tb&rsv_sug3=35&rsv_sug1=36&rsv_sug7=101&rsv_sug2=0&rsv_btype=i&inputT=10383&rsv_sug4=11051

<template>

  <div v-html="html"></div>

  <!-- 模块按需引入 -->
  <Module/>

  <!-- 装饰器 -->
  <Decorator/>

  <div   @focus="focusFun"  id="insertHTML" contenteditable="true" style="-webkit-user-select: auto;-webkit-user-select:text" />

  <div @click="setImg" unselectable="on" onmousedown="return false;" >点击</div>
  <div @click="setInput" unselectable="on" onmousedown="return false;" >设置input</div>
</template>
<script>
import {onMounted} from 'vue'
window.checkField =   ()=>{
  console.log(1111111)
}
export default {
  setup(){
    // 兼容切换表情输入的时候不聚焦无法插入图片
    function focusFun() {
      document.getElementById('insertHTML').focus()
      setTimeout(() => {
        document.activeElement.blur()
      },10)
    }

    let html = `<input onchange='checkField()'   value='mingzi33'/>`
    function setImg() {
      let imgSrc =
        "https://b03-pre-images.we-pj.net/image/20210115/e416ba76-6393-4127-90a5-fc0f9ff9013c.png?316x184";
      const imgTag = `<img src="${imgSrc}" width="28px" height="28px">`;
      // document.execCommand("insertHTML", true, imgTag);
      //  let imgTag = `<p><img src=${eidtorImg.src} /></p>`;
      insertContent(imgTag);
    }

    function setInput() {
      let html = `<input onchange='checkField()' readonly='readonly' value='mingzi'/>`
      insertContent(html);
    }

    function insertContent(content) {
      if (!content) {
        //如果插入的内容为空则返回
        return;
      }
      let sel = null;
      if (document.selection) {
        //IE9以下
        sel = document.selection;
        sel.createRange().pasteHTML(content);
      } else {
        sel = window.getSelection();
        if (sel.rangeCount > 0) {
          let range = sel.getRangeAt(0); //获取选择范围
          range.deleteContents(); //删除选中的内容
          let el = document.createElement("div"); //创建一个空的div外壳
          el.innerHTML = content; //设置div内容为我们想要插入的内容。
          let frag = document.createDocumentFragment(); //创建一个空白的文档片段，便于之后插入dom树

          let node = el.firstChild;
          let lastNode = frag.appendChild(node);
          range.insertNode(frag); //设置选择范围的内容为插入的内容
          let contentRange = range.cloneRange(); //克隆选区
          contentRange.setStartAfter(lastNode); //设置光标位置为插入内容的末尾
          contentRange.collapse(true); //移动光标位置到末尾
          sel.removeAllRanges(); //移出所有选区
          sel.addRange(contentRange); //添加修改后的选区
        }
      }
    }

    return  {
      html,
      setImg,
      setInput
    }
  }
}
</script>
<style scoped>
#insertHTML {
  border: 1px solid #ccc;
  height: 50px;
  outline: none;
  margin: 30px;
}
</style>