几个好用的富文本编辑原生api

window/event.clipboardData 剪切板内容

addEventListener('paste',function(e){
    e.stopPropagation()
    e.preventDefault()
    var text = '.........'
    //获取剪切板内的文本内容, 以各种类型（第一个参数）获取剪切板的内容，常见text/plain、Text
    if(event.clipboardData?.getData){
        text = event.clipboardData.getData('text/plain')
    }else if(window.clipboardData?.getData){
        text = window.clipboardData.getData('text')
    }
    //执行粘贴或者插入命令，先得查看命令是否支持
    if(document.queryCommandSupported('insertText')){
        //文本内\n在执行插入以及粘贴命令时，会被转义成<br>换行，并且被一个外层div给包裹起来，会带有div格式，从而后续获取节点内容不是单纯的文本内容
        document.execCommand('insertText',false,text.replace(/\n/,''))
    }else{
        document.execCommand('paste',false,text.replace(/\n/,''))
    }
})

document.selection或者window.getSelection() 获取选中内容，返回一个Selection对象

developer.mozilla.org/zh-CN/docs/… Selection

与之相关还有selection.getRangeAt([number])返回一个范围Range类型

developer.mozilla.org/zh-CN/docs/… Range

let content = document.getElementById('...').cloneNode(true)
let frag = document.createDocumentFragment()
//空占位符，避免插入div之后光标问题，后续获取文本时，需要进行处理，通过encodeURI得到之后替换.replace(/%E2%80%8B/g,'')
let lastNode = frag.appendChild(content)
frag.appendChild(document.createTextNode('\u200b')) 
if(document.selection){
    sel = document.selection
    sel.createRange().parseHTML(content)
}else{
    sel = window.getSelection()
    if(sel.rangeCount > 0){
        let range = sel.getRangeAt(0)
        range.deleteContents()
        range.insertNode(frag)
        range.setStartAfter(lastNode) //设置range起点start，具体查看mdn
        range.collapse(true) //折叠光标到start位置，结合上一步，将光标定位到结尾
    }
}