window.getSelection

mkmin

已于 2022-03-01 18:37:05 修改

阅读量1.3k

点赞数

分类专栏：前端

于 2022-02-22 17:38:20 首次发布

本文链接：https://blog.csdn.net/HUSHILIN001/article/details/123072689

版权

富文本编辑器 mouseup事件选区 window.getSelection() 元素判断

关键词由CSDN通过智能技术生成

前端专栏收录该内容

19 篇文章 1 订阅

订阅专栏

开发中，时常会遇到一个开发场景。当我们在编辑一个富文本的时候。当用户选择了某些文字。我们需要弹出一个窗，让用户选择是否把它变成可粗体，比如下面这个图
在这里插入图片描述
当然，今天不会直接敲出这个效果，而是解析下而已。毕竟敲出来对新手不友好，需要给予更多的时间思考

通过测试多次。我们发现了几个问题，
1.触发这事件的效果，是需要在鼠标起来的时候触发。
2.鼠标起来的时候，如果被选中的包含太多了。比如多个元素，则不显示操作

简单版本就只有这两点，更复杂的效果是还要考虑类似‘ctrl’+‘A’时的情况

对于上述问题，第一点，使用mouseup可以轻松的监听。也就是

document.body.addEventListener("mouseup",function(){
})

这点没啥技术含量。问题取决于第二点，我们需要知道用户选择了哪个组件，哪个文本。这时候就用到了selection了。
考虑到上面所描述的两个关键点（1.选择的元素，2.是否多元素）
可以做出下面的代码判定

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>测试的文本-测试的文本1</div>
    <div>测试的文本-测试的文本2</div>
</body>

<script>
    document.body.addEventListener("mouseup", function () {
        setTimeout(() => {
            const selection = window.getSelection();
            console.log(`开始节点是:`)
            console.log(selection.anchorNode);
            console.log(`结束节点是:`)
            console.log(selection.focusNode);
        }, 10);
    })

</script>

</html>

具体的测试可以参考下图
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZbtCEDHB-1646130853311)(
至于其他的。我感觉没啥好说，都是扩展。加油，至于具体版本，后面可能会出。因为有相关的知识储备还是好的