contenteditable 是一個(gè)枚舉屬性，表示元素是否可被用戶編輯。如果可以，瀏覽器會(huì)修改元素的組件以允許編輯

使用div的contenteditable屬性的原因，公司最近開(kāi)始了一個(gè)數(shù)字人ai的項(xiàng)目，大致的意思就是自己撰寫(xiě)文字，調(diào)節(jié)使用中的多音字，插入斷句停頓，利用第三方平臺(tái)直接生成視頻行為。（大多數(shù)用于短視頻，小說(shuō)的生成）

例如

// ondrop="return false" ondragover="return false" 防止向div里面拖動(dòng)圖片
 <div id="textEdit" contenteditable ondrop="return false" ondragover="return false" v-html="text"></div>

但是有時(shí)候用戶在百度百科上粘貼一些文本，導(dǎo)致樣式也復(fù)制進(jìn)了富文本編輯器里，所以在粘貼的時(shí)候就得限制一下，復(fù)制文本的時(shí)候去除原有樣式

document.querySelector('div[contenteditable="true"]').addEventListener("paste", function(e) {
        e.stopPropagation();
        e.preventDefault();
        var text = '', event = (e.originalEvent || e);
        if (event.clipboardData && event.clipboardData.getData) {
          text = event.clipboardData.getData('text/plain');
        } else if (window.clipboardData && window.clipboardData.getData) {
          text = window.clipboardData.getData('Text');
        }
        if (document.queryCommandSupported('insertText')) {
          document.execCommand('insertText', false, text);
        } else {
          document.execCommand('paste', false, text);
        }
      })

插入停頓元素

// 插入停頓
handlePauseClick() {
  let selection = window.getSelection();
  let position = selection.getRangeAt(0) || 0;
  const span = document.createElement('span');
  span.innerHTML = '[1S]';
  span.id = Math.random();
  span.className = 'tag-split';
  span.setAttribute('contenteditable',false);
  span.dataset.value = 1;
  // 添加點(diǎn)擊事件
  span.onclick = (event)=>{})
  position.insertNode(span);
  position.setStartAfter(span);
  position.setEndAfter(span);
}

多音字替換

// text是撰寫(xiě)的文本，polyphonyList是多音字
addPolyPhone(text, polyphonyList) {
 for(let e of polyphonyList){
        let reg = new RegExp(e.text, "img")
        text = text.replace(reg,(a,b)=>{
            return '<b id="'+Math.random()+'" class="pronounce-wrapper" contenteditable="false" data-text="'+a+'" data-value="'+e.polyphony[0]+'">'
            +'<span class="selectedSpan">'+a+'</span>'
            +'<span class="tag-pronouncee">['+e.polyphony[0]+']</span>'
            +'</b>';
        })
    }
    return text;
}
//給多音字的dom添加點(diǎn)擊事件
addPolyphonicEvent() {
 // 獲取所有的多音字節(jié)點(diǎn)
  let pw = document.getElementsByClassName('pronounce-wrapper');
 for(let e of pw){
// 循環(huán)，給所有的加上點(diǎn)擊事件，用于修改
 e.onclick = (event)=>{})
}
}