为网页上选中部分设置高亮

喜欢 vijos 可以在题面上做标注的那个功能好久了……

今天决定动手写一下

搜了好久搜不出来什么方法,发现可以获取 selection 的 range 然后操作一下,懵逼。不知道如果选中的是两个标签内的咋整。

后来学习了一下 vijos 的 源码,发现可以用 HiliteColor 这个东西。搜了下,就发现了一些方法。

https://stackoverflow.com/questions/2756931/highlight-the-text-of-the-dom-range-element

至于怎么做悬浮工具栏还没有想好,目前用的 这个,自己的配色也很丑,功能和 vijos 比差远了= =

不过写出来了还是好赞啊 XD


遇到了一个问题,因为全局监听的是 mouseup,然后触发 popup-tagclick 就会冲突。

搜到应该用一个 event.stopPropagation();

还有一个坑是发现莫名奇妙 click 的时候 selection 变成空的了。

第一个想法是 select 的时候就存下当前的 range,结果发现竟然每 select 一次都会存下来,然后 click 的时候会把所有存下来的 range 都触发= =

解决办法是把 popup-tagclick 换成了 mousedown

哎…… vijos 是真的厉害