先放上最后的效果,这是点击图片以前:
这是点击图片以后:
非常清晰,一目了然,就算是小白用户也明白发生了什么。挺好的。
最近在做编辑器相关的东西,遇到一个需求,用户在编辑器中插入或者粘贴的图片要支持点击以后,可以按退格键或者删除键删除掉。
刚开始拿到这个需求的想法是调用编辑器自带的删除图片方法删掉图片,但后来查看源码发现这个方法是编辑器内部方法,并没有暴露出来,于是第一个思路走不通了。
第二个思路是在编辑器的顶层容器里监听keyup事件,然后判断是否是两个删除键,如果是就拦截,然后找到当前点击的图片,手动删掉。
实际上这也是行不通的,原因有二。首先,这个删除是没法阻止的,因为事件的监听是在顶层父元素里,这时候阻止其实是阻止掉事件在顶层容器上的效果,而不是在发生元素上的效果。所有涉及到事件冒泡的地方,在父容器上阻止效果都是不能达到目的的,只能在事件最开始发生的元素上阻止只
然后,当按下删除键的时候,之前点击的图片已经不是点击状态了,已经拿不到了。因为取消选择在前,删除在后。
后来忽然意识到,想要的效果其实就是点击图片的时候选中图片,就像用户自己选中网页中一段内容那样选中那张图片就好了。页面上点击一个图片默认是没有效果的,我要做的仅仅是点击时候选中这个图片就可以了。这样做的好处是,当用户点击图片选中以后,如果点删除键,无论是退格还是删除键都可以删除,而且如果用户不像删除,直接点击别的地方,或者按下上下左右箭头就可以取消选择,这和用户平时的操作体验是一样的,根本没有什么副作用。
选择是HTML5的新接口,是窗口的一个方法,用法是window.getSelection ()。
取得选择以后,要把当前图片加入到选取中,选择有一个Selection.selectAllChildren()方法,但这个方法只能选中元素的全部子元素,而我们要选中的是img元素自身,img元素也没有子元素。于是继续在选择的方法中看看有没有别的长的像的方法,果然,找到了Selection.addRange()看这长相一看就很像我们要找的人.addRange方法需要传入一个范围对象,范围是啥呢?
平时在页面上选择东西都是鼠标咔一下框一大片,但如果在编辑器里,其实是可以选择好几个片段的,一般按住Ctrl/控制键就可以多处选择。我猜这个选择就类似于选中的所有区域,范围就类似于每一个单独的选中的片段,先这么理解。
继续往下看,发现范围有一个Range.selectNode()方法,这不正是我要找的人吗?先创建一个范围对象,让范围=document.createRange (),createRange是文档的方法,然后讲当前图片插入范围,再把范围插入选择中即可。代码如下:
这个实现方法的最大优点在于利用浏览器原生自带的功能,这样就和用户的操作习惯保持一致,不会有任何的突兀。选中的效果很明显,而且选中以后无论是删除,还是取消,都跟之前习惯一致,都很容易,更要的是这些操作不用再写代码了啊,因为是浏览器原生自带的功能。
嗯,算是比较完美了。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!
