vue中使用div的contenteditable(富文本編輯器)

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)=>{})
}
}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容