关于富文本编辑器contenteditable=”true”的巨坑

1.range光标

不能使用div的点击 一定要用img 因为div的点击会影响编辑器的光标获取

2.关于点击更新光标selection的问题

这里可能是触及到dom的方法周期，foucs会在input之前，也就是说先focus更新之后，在input的时候会更新光标的dom位置，所以获取光标处于的dom节点，直接就用input来监听就可以了

// 点击监听
    test () {
        let node = window.getSelection().anchorNode
        console.log(node.nodeType, node.DOCUMENT_NODE, node.classList, node.parentNode)
    },

3.在监听滚动条的时候

如果使用

window.addEventListener('scroll', this.handleScroll)

没用

就换为当前dom来监听，这个可能是因为你禁用了body的overflow

document.getElementById('write').addEventListener('scroll', this.handleScroll)

最后记得要销毁这个

destroyed () {
    document.getElementById('write').removeEventListener('scroll', this.handleScroll)
  }

4.最后，放上我的成果