富文本编辑器,图片单击选中,Range和Selection的使用

xiaoxiao2021-02-28  51

目前在做富文本编辑器,想实现一个很简单的功能,单击图片能够选中(描蓝),如的编辑器就有这个功能:

但奈何这种需求可能不太必要,网上对此有研究的文章几乎没有,或是对选中操作进行泛泛而谈,找不着重点。最后只能潜心研究关键的Selection和Range对象的各种属性和方法,进行无数次的尝试后终于找到完美的方案。

结果很简单,但探索的过程十分艰辛,分享出来给大家减轻负担:

img.addEventListener('click', function(){ nl=this.parentNode.childNodes for (var i = 0; i < nl.length; i++) { if(this==nl[i]){ j=i;break } } range=document.createRange() range.setStart(this.parentNode, j) range.setEnd(this.parentNode, j+1) st.removeAllRanges() st.addRange(range) })

效果如下:

转载请注明原文地址: https://www.6miu.com/read-2627115.html

最新回复(0)