vue中使用div的contenteditable(富文本编辑器)

contenteditable 是一个枚举属性，表示元素是否可被用户编辑。如果可以，浏览器会修改元素的组件以允许编辑

使用div的contenteditable属性的原因，公司最近开始了一个数字人ai的项目，大致的意思就是自己撰写文字，调节使用中的多音字，插入断句停顿，利用第三方平台直接生成视频行为。（大多数用于短视频，小说的生成）

例如

// ondrop="return false" ondragover="return false" 防止向div里面拖动图片
 <div id="textEdit" contenteditable ondrop="return false" ondragover="return false" v-html="text"></div>

但是有时候用户在百度百科上粘贴一些文本，导致样式也复制进了富文本编辑器里，所以在粘贴的时候就得限制一下，复制文本的时候去除原有样式

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;
  // 添加点击事件
  span.onclick = (event)=>{})
  position.insertNode(span);
  position.setStartAfter(span);
  position.setEndAfter(span);
}

多音字替换

// text是撰写的文本，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添加点击事件
addPolyphonicEvent() {
 // 获取所有的多音字节点
  let pw = document.getElementsByClassName('pronounce-wrapper');
 for(let e of pw){
// 循环，给所有的加上点击事件，用于修改
 e.onclick = (event)=>{})
}
}