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)=>{})
}
}