富文本编辑器基础功能实现原理(替换 excCommand 废除)

富文本编辑器操作原理

let selection = window.getSelection()

let range = selection.getRangeAt(0)
let content = range.extractContents() // 获得文档片段
let span = document.createElement('span')
span.appendChild(content)
span.style.color = 'red'
range.insertNode(span) // 插入node节点

当同时插入多个同级node 节点时为了避免渲染多次，可以使用 fragment dom 片段

let selection = window.getSelection()
let range = selection.getRangeAt(0)
let content = range.extractContents()
console.log(content.childNodes) // 当选中 的内容包含多个node节点，可以单独设置然后放到 fragment 中
let span = document.createElement('span')
span.appendChild(content)
span.style.color = 'red'
let testSpan= document.createElement('span')
testSpan.innerHTML = 'test'
testSpan.style.color = "green"
let fragment = document.createDocumentFragment()
fragment.appendChild(span)
fragment.appendChild(testSpan)
range.insertNode(fragment)

range MDN
selection MDN