<template>
  <div
    ref="divInput"
    class="edit-div"
    style="-webkit-user-select: auto"
    :contenteditable="canEdit"
    @blur="onBlur"
    @input="changeText($event)"
    @keyup.space="changeSpace($event)"
    @keyup.enter="changeEnter($event)"
    @paste="onPaste"
    @focus="onFocus"
    placeholder="請(qǐng)輸入消息內(nèi)容"
    slot="title"
    v-html="innerText"
  ></div>
</template>
<script>
export default {
  props: {
    value: {
      type: String,
      default: "",
    },
    canEdit: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      innerText: this.value,
      isLocked: false,
    }
  },
  watch: {
    value() {
      if (!this.isLocked && !this.innerHTML) {
        this.innerText = this.value
      }
    },
  },
  methods: {
    getRefBlur() {
      this.$refs.divInput.blur()
    },
    getRefFocus() {
      this.$refs.divInput.focus()
    },
    onBlur() {
      this.$emit("onblurChange", this.$el.innerHTML)
      this.isLocked = false
    },
    // 主要用于處理光標(biāo)得定位問(wèn)題
    keepLastIndex(obj) {
      console.log(obj);
      if (window.getSelection) {
        obj.focus()
        let range = window.getSelection()
        range.selectAllChildren(obj)
        range.collapseToEnd()
      } else if (document.selection) {
        let range = document.selection.createRange() //創(chuàng)建選擇對(duì)象
        range.moveToElementText(obj) //range定位到obj
        range.collapse(false) //光標(biāo)移至最后
        range.select()
      }
    },
    changeSpace(e) {
      setTimeout(() => {
        this.keepLastIndex(e.target)
      }, 30)
      this.$emit("keyupSpace", this.$el.innerHTML)
    },
    changeEnter(e) {
      setTimeout(() => {
        this.keepLastIndex(e.target)
      }, 30)
      this.$emit("keyupEnter", this.$el.innerHTML)
    },
    // 實(shí)時(shí)監(jiān)聽(tīng)當(dāng)前內(nèi)容
    changeText(e) {
      console.log(e)
      if(e.data){
        console.log('數(shù)據(jù)：'+this.$el.innerHTML)
        setTimeout(() => {
          this.keepLastIndex(e.target)
        }, 30)
        this.$emit("input", this.$el.innerHTML)
      }
    },
    // 輸入框粘貼事件
    onPaste(event) {
      this.$emit("onPaste", event)
    },
    //
    onFocus(event) {
      this.$emit("onFocus", event)
    },
  }
}
</script>
<style scoped>
</style>

結(jié)果：{{editInputVal}}-{{mrEditInputVal}}
    <el-button @click = 'addStrBtnFun'>{{addBtnText}}</el-button>
    <inputDiv
      ref="imitate"
      id="imitate"
      class="imitate-input imitate-placeholder js-imitate-input"
      @onblurChange="onblurChange($event)"
      @onFocus="getFocus"
      @onPaste="onPaste"
      v-html="mrEditInputVal"
      @input="contentedInput($event)"
      @keyupSpace="contentedKeySpace($event)"
      @keyupEnter="contentedKeyEnter($event)"
      @changeKeyup="changeKeyup($event)"
    ></inputDiv>

js部分：
import inputDiv from './components/inputDiv'
components: {
    inputDiv,
  },
data() {
    return {
      mrEditInputVal:'',
      editInputVal:'',
      addBtnText:'插入員工昵稱(chēng)',
      abc:'',
      teamContent: "<p>幸福 人和 測(cè)試增加數(shù)據(jù) 在加1111222</p>"
    }
  },
methods: {
    onblurChange(val){
      // debugger
    },
    getFocus(val){
      // debugger
    },
    onPaste(val){
      // debugger
    },
    contentedInput(val){
      if(val.indexOf('<span')!= -1){
        let arr1 = val.split('<span')
        let arr2 = arr1[1].split('/span>')
        let arr3 = arr2[0].split('>')
        let arr4 = arr3[1].split('<')
        if(arr4[0] != this.addBtnText){
          let val = this.editInputVal = arr1[0]+arr4[0]+arr2[1]
          this.mrEditInputVal = JSON.parse(JSON.stringify(val))
          return
        }
      }
      this.editInputVal = val
    },
    contentedKeySpace(val){
      // debugger
    },
    contentedKeyEnter(val){
      // debugger
    },
    changeKeyup(val){
      // debugger
    },
    addStrBtnFun(){
      let index = this.getCursorPosition()
      let insertStr = (soure,start, newStr) => {
        return soure.slice(0, start) + newStr + soure.slice(start)
      }
      let newStr = insertStr(this.editInputVal,index,'<span class="selColor">'+this.addBtnText+'</span>')
      this.mrEditInputVal = newStr
    },
    getCursorPosition(){
      const selection = window.getSelection();
      const range = selection.getRangeAt(0);
      const cursorPos = range.startOffset;
      return cursorPos
    },

 <div
      class="edit"
      contenteditable="true"
      @input="editInput"
      placeholder="請(qǐng)輸入消息內(nèi)容"
      v-html="innerHtml"
    >
    </div>

initEditFun(){
      editDiv = document.getElementsByClassName("edit")[0]
      editDiv.addEventListener("blur", () => {
        // 這一步是保留住edit編輯框中的選區(qū)的范圍對(duì)象。否則失焦后，getSelection()方法返回的選區(qū)對(duì)象已經(jīng)不再是編輯框了，已經(jīng)獲取不到編輯框中的范圍對(duì)象了。
        range = window.getSelection().getRangeAt(0)
      })
    },

.selColor{
  color: red;
}

addStrBtnFun(){
      const span = document.createElement("span")
      span.innerText = this.addBtnText
      span.className = 'selColor'
      // 如果在頁(yè)面刷新再點(diǎn)擊編輯框之前就點(diǎn)擊了按鈕，此時(shí)range中并沒(méi)有選區(qū)范圍對(duì)象
      if (range === "") {
        let selection = window.getSelection()
        selection.selectAllChildren(editDiv) // selectAllChildren把指定元素的所有子元素設(shè)為選中區(qū)域，并取消之前的選中區(qū)域。不包括node節(jié)點(diǎn)本身。
        /*
          Selection.collapseToEnd() 方法的作用是取消當(dāng)前選區(qū)，并把光標(biāo)定位在原選區(qū)的最末尾處，如果此時(shí)光標(biāo)所處的位置是可編輯的，且它獲得了焦點(diǎn)，則光標(biāo)會(huì)在原地閃爍。
          以上selectAllChildren方法，將div中子節(jié)點(diǎn)全部選中，collapseToEnd方法將選中區(qū)域取消，并且將光標(biāo)定位到原區(qū)的末尾。
        */
        selection.collapseToEnd()
        range = window.getSelection().getRangeAt(0) // 無(wú)論哪一步都需要保存當(dāng)前編輯框的選區(qū)對(duì)象
      }
      let sel = window.getSelection()
      range.insertNode(span) // insertNode方法，在range選區(qū)開(kāi)頭插入一個(gè)節(jié)點(diǎn)
      /*
      removeAllRanges方法：刪除之前的所有選區(qū)。
      這一步的意義：因?yàn)楫?dāng)我們點(diǎn)擊其他區(qū)域時(shí)，選區(qū)對(duì)象已經(jīng)改變，不再是編輯框中的選區(qū)對(duì)象，這時(shí)候我們接下來(lái)的操作都不會(huì)符合我們想象中的樣子
     */
      sel.removeAllRanges()
      sel.addRange(range) // 這一步就是添加當(dāng)前區(qū)域?qū)ο蟮竭x區(qū)對(duì)象中，所以選區(qū)對(duì)象會(huì)再次指向編輯框中的選區(qū)，不會(huì)出現(xiàn)別的錯(cuò)誤操作。
      sel.collapseToEnd()
    },

@input="editInput"

 editInput(e) {
      console.log(e);
      console.log(e.target.children);
},

editInput(e) {
      console.log(e);
      console.log(e.target.children);
      if(e.target.children.length>0){
        this.editSpanClass()
      }
    },
    editSpanClass(){
      let spanAll = document.querySelectorAll('.edit span')
      spanAll.forEach(item=>{
        if(item.innerHTML != this.addBtnText){
          item.className = ''
        }
      })
    },

<template>
  <div class="chitchat">
    <div style="width:32px;height:32px;">
      <img
          src="../../../../assets/images/microcode/touxiang.png"
          alt=""
          width="100%"
          height="100%"
      >
    </div>
    <div id="editDivBody" :class="isInspection?'Inspection':''">
      <div style="margin-bottom:12px">
        <el-button class="nickname" @click ="addStrBtnFun(addBtnText)">{{addBtnText}}</el-button>
        <el-button class="nickname" @click = "addStrBtnFun(serviceConsultant)">{{serviceConsultant}}</el-button>
        <el-button class="nickname" @click = "addStrBtnFun(departments)">{{ departments }}</el-button>
<!--                <el-button @click="getSpecialContent">點(diǎn)我</el-button>-->
<!--                <el-button @click="checkIsNonData">是否空</el-button>-->
      </div>
      <div class="headPortrait" v-if="uploadHtml">
        <div
          :disabled="textSize >= maxNum"
          ref="editInput"
          class="edit"
          id="editSelDiv"
          contenteditable="true"
          @input="editInput"
          placeholder="請(qǐng)輸入消息內(nèi)容"
          v-html="innerHtml"
          @paste="handlePaste"
        >
        </div>
<!--                實(shí)時(shí)數(shù)據(jù)1：-->
<!--                {{nowHtmlT}}-->
<!--                <hr>-->
<!--                實(shí)時(shí)數(shù)據(jù)2：{{nowText}}-->
      </div>
    </div>
    <div class="limit">{{textSize}}/{{maxNum}}</div>
    <p v-if="isInspection" class="Contentfilling">請(qǐng)?zhí)顚?xiě)消息內(nèi)容</p>
  </div>
</template>
<script>
let editDiv = null //編輯元素
let range = "" //選區(qū)
export default {
  data () {
    return {
      addBtnText:'客戶(hù)昵稱(chēng)',
      serviceConsultant:'所屬顧問(wèn)',
      departments:'所屬部門(mén)',
      // 賦值
      innerHtml:'',// 初始化賦值
      innerHtmlBf:'',//備份數(shù)據(jù)
      nowHtmlT:'',// 實(shí)時(shí)html-動(dòng)態(tài)變量
      nowText:'',// 實(shí)時(shí)文本
      // 獲取當(dāng)前最新數(shù)據(jù)
      getDataTime:1000,
      getDataTimeInter:null,
      textSize:0,
      maxNum:500,
      isInspection:false,
      uploadHtml:true,
    }
  },
  mounted() {
    this.initEditFun()
  },
  methods:{
    initEditFun(){
      editDiv = document.getElementById("editSelDiv")
      editDiv.addEventListener("blur", () => {
        // 這一步是保留住edit編輯框中的選區(qū)的范圍對(duì)象。
        // 否則失焦后，getSelection()方法返回的選區(qū)對(duì)象已經(jīng)不再是編輯框了，已經(jīng)獲取不到編輯框中的范圍對(duì)象了。
        range = window.getSelection()?window.getSelection().getRangeAt(0):''
      })
      document.addEventListener('selectionchange', (e) => {
        let selection = document.getSelection();
        let rangeVal = selection &&  selection.rangCount>0?selection.getRangeAt(0):''
        if (
          (rangeVal && this.hasAncestorWithId(rangeVal.commonAncestorContainer,'editSelDiv'))
        ) {
          range =  window.getSelection()?window.getSelection().getRangeAt(0):''
        }
      });
    },
    // 遞歸判斷是否有父級(jí)id = editSelDiv
    hasAncestorWithId(element, id) {
      if (!element) return false;
      if (element.id === id) return true;
      if (element.parentNode) {
        return this.hasAncestorWithId(element.parentNode, id);
      }
      return false;
    },
    editInput(e) {
      // console.log(e);
      this.getNowContent() //獲取最新內(nèi)容
      if(e.target.children.length>0){
        this.editSpanClass()
      }
      if(e.target.innerText == ''){
        range = ''
        e.target.innerHtml = ''
        this.innerHtml = ''
        this.innerHtmlBf = ''
      }
    },
    editSpanClass(){
      let spanAll = document.querySelectorAll('.edit span')
      spanAll.forEach(item=>{
        let nowVal = item.childNodes[0].data
        if(
          nowVal &&
          nowVal.trim() != this.addBtnText &&
          nowVal.trim() != this.serviceConsultant &&
          nowVal.trim() != this.departments
        ){
          item.className = 'mrClass'
        }
      })
    },
    // 粘貼
    handlePaste(e){
      e.preventDefault(); // 阻止默認(rèn)粘貼操作
      const clipboardData = e.clipboardData || window.clipboardData;
      const text = clipboardData.getData('text/plain'); // 獲取純文本內(nèi)容
      document.execCommand('insertHTML', false, text); // 將文本插入 contenteditable 元素中
    },
    addStrBtnFun(Text){
      const innerText = this.$refs.editInput.innerText
      const now_length = innerText.split('\u200B').join('').length
      const length = now_length + Text.length //當(dāng)前長(zhǎng)度+按鈕文字長(zhǎng)度
      if(length > this.maxNum){
        return
      }
      const span = document.createElement("span")
      span.innerText = Text
      span.className = 'selColor'
      // 如果在頁(yè)面刷新再點(diǎn)擊編輯框之前就點(diǎn)擊了按鈕，此時(shí)range中并沒(méi)有選區(qū)范圍對(duì)象
      if (range === "") {
        let selection = window.getSelection()
        selection.selectAllChildren(editDiv) // selectAllChildren把指定元素的所有子元素設(shè)為選中區(qū)域，并取消之前的選中區(qū)域。不包括node節(jié)點(diǎn)本身。
        /*
          Selection.collapseToEnd() 方法的作用是取消當(dāng)前選區(qū)，并把光標(biāo)定位在原選區(qū)的最末尾處，如果此時(shí)光標(biāo)所處的位置是可編輯的，且它獲得了焦點(diǎn)，則光標(biāo)會(huì)在原地閃爍。
          以上selectAllChildren方法，將div中子節(jié)點(diǎn)全部選中，collapseToEnd方法將選中區(qū)域取消，并且將光標(biāo)定位到原區(qū)的末尾。
        */
        selection.collapseToEnd()
        range = window.getSelection()?window.getSelection().getRangeAt(0):''// 無(wú)論哪一步都需要保存當(dāng)前編輯框的選區(qū)對(duì)象
      }
      let sel = window.getSelection()
      let space = document.createTextNode('\u200B'); // 創(chuàng)建 &ZeroWidthSpace; 實(shí)體字符節(jié)點(diǎn)
      range.insertNode(space)
      range.insertNode(span) // insertNode方法，在range選區(qū)開(kāi)頭插入一個(gè)節(jié)點(diǎn)
      /*
      removeAllRanges方法：刪除之前的所有選區(qū)。
      這一步的意義：因?yàn)楫?dāng)我們點(diǎn)擊其他區(qū)域時(shí)，選區(qū)對(duì)象已經(jīng)改變，不再是編輯框中的選區(qū)對(duì)象，這時(shí)候我們接下來(lái)的操作都不會(huì)符合我們想象中的樣子
     */
      sel.removeAllRanges()
      sel.addRange(range) // 這一步就是添加當(dāng)前區(qū)域?qū)ο蟮竭x區(qū)對(duì)象中，所以選區(qū)對(duì)象會(huì)再次指向編輯框中的選區(qū)，不會(huì)出現(xiàn)別的錯(cuò)誤操作。
      sel.collapseToEnd()
      this.editSpanClass()
      this.getNowContent()
    },
    resevedSelDiv(){
      range = document.createRange();
      range.selectNode(document.getElementById("editSelDiv").lastChild);
      window.getSelection().removeAllRanges();
      window.getSelection().addRange(range);
      let selection = window.getSelection()
      selection.selectAllChildren(editDiv)
      selection.collapseToEnd()
      range = window.getSelection()?window.getSelection().getRangeAt(0):''
      console.log(333);
    },
    // 獲取最新的內(nèi)容
    getNowContent(){
      const innerText = this.$refs.editInput.innerText
      const length = innerText.split('\u200B').join('').length
      if(length<= this.maxNum){
        this.innerHtmlBf = this.$refs.editInput.innerHTML
        this.nowText = this.$refs.editInput.innerText
        this.textSize = length
        this.isInspection=false
      }else{
        this.uploadHtml = false
        this.$nextTick(() => {
          this.innerHtml = this.innerHtmlBf
          this.uploadHtml = true
          setTimeout(()=>{
            this.resevedSelDiv()
          },1)
        });
      }
    },
    // 獲取帶符號(hào)的內(nèi)容
    getSpecialContent(){
      let spanAll = document.querySelectorAll('.edit span')
      let mrArr = []
      spanAll.forEach(item=>{
        let nowVal = item.childNodes[0].data
        mrArr.push(nowVal)
        if(item.className == 'selColor'){
          if(nowVal == this.addBtnText){
            item.childNodes[0].data = '${customerNickname}' //客戶(hù)昵稱(chēng)
          }else if(nowVal == this.serviceConsultant){
            item.childNodes[0].data = '${affiliatedConsultant}'//所屬顧問(wèn)
          }else if(nowVal == this.departments){
            item.childNodes[0].data = '${department}' //所屬部門(mén)
          }
        }
      })
      this.nowHtmlT = this.$refs.editInput.innerText
      this.nowHtmlT = this.replaceText(this.nowHtmlT,this.addBtnText,"${customerNickname}")
      this.nowHtmlT = this.replaceText(this.nowHtmlT,this.serviceConsultant,"${affiliatedConsultant}")
      this.nowHtmlT = this.replaceText(this.nowHtmlT,this.departments,"${department}")
      spanAll.forEach((item,i)=>{
        item.childNodes[0].data = mrArr[i]
      })
      this.$emit('nowHtmlT',this.nowHtmlT)
    },
    replaceText(text, oldStr, newStr) {
      // 檢查是否為字符串類(lèi)型
      if (typeof text !== 'string') {
        text = String(text);
      }
      // 替換字符
      text = text.replace(new RegExp(oldStr, "g"), newStr);
      // 處理子級(jí)
      if (text.includes('<') && text.includes('>')) {
        const start = text.indexOf('<');
        const end = text.indexOf('>') + 1;
        let subtext = text.substring(start, end);
        while (start >= 0 && end >= 0 && end > start) {
          const subtextNew = replaceText(subtext, oldStr, newStr);
          text = text.substring(0, start) + subtextNew + text.substring(end);
          subtext = text.substring(start, end);
        }
      }
      return text;
    },
    checkIsNonData(){
      const innerText = this.$refs.editInput.innerText
      const length = innerText.split('\u200B').join('').length
      if(innerText == '' || innerText == '\n' || length == 0){
        this.isInspection = true
      }else{
        this.isInspection = false
      }
    },
  },
  beforeDestroy() {
    editDiv = null //編輯元素
    range = "" //選區(qū)
  }
}
</script>
<style lang="scss" scoped>
.edit{
  width: 100%;
  height:auto;
  min-height: 130px;
  max-height: 135px;
  overflow-y: auto;
}
.edit:focus {
  outline: 0;
  border-color: #409EFF;
}
#editDivBody{
  width: 100%;
  //height:203px;
  overflow-y: auto;
  background: #FAFBFC;
  border-radius: 4px;
  border: 1px solid #DCDEE6;
  padding: 12px 12px 20px 13px;
  margin-left: 8px;
  position: relative;
}
::-webkit-scrollbar {
  /*滾動(dòng)條整體樣式*/
  width: 5px; /*高寬分別對(duì)應(yīng)橫豎滾動(dòng)條的尺寸*/
  height: 1px;
}
::-webkit-scrollbar-thumb {
  /*滾動(dòng)條里面小方塊*/
  border-radius: 5px;
  background-color:  #D8D8D8;
}
::-webkit-scrollbar-track {
  background-color: #f6f6f6;
}
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-track {
  border: 0;
}
.Inspection{
  border: 1px solid #FF4949!important;
}
.nickname{
  background: #FFFFFF;
  border-radius: 4px;
  border: 1px solid #DCDFE6;
  font-size: 12px;
  font-weight: 400;
  color: #1890FF;
  line-height: 17px;
  padding: 4px 8px;
}
.chitchat{
  display: flex;
  position: relative;
  width: 79%;
}
.Contentfilling{
  width: 84px;
  height: 17px;
  font-size:12px;
  line-height: 17px;
  color: #FF4949;
  position: absolute;
  bottom: -18px;
  left: 41px;
  margin: 0;
}
/deep/.selColor{
  color: #1890FF;
  font-size: 14px;
}
/deep/.mrClass{
  color: #000;
  font-size: 14px;
}
.limit{
  position: absolute;
  bottom: 0;
  right:0;
  padding: 0 8px;
  line-height: 22px;
  font-size: 14px;
  color: #86909C;
}
.headPortrait{
  position: relative;
  font-size: 14px;
}
</style>