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.最后,放上我的成果