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

目前在做富文本编辑器，想实现一个很简单的功能，单击图片能够选中（描蓝），如CSDN的编辑器就有这个功能：

但奈何这种需求可能不太必要，网上对此有研究的文章几乎没有，或是对选中操作进行泛泛而谈，找不着重点。最后只能潜心研究关键的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)
    	})

效果如下：