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