【亲测免费】 Rangy：JavaScript跨浏览器文本选择与范围操作库

2026-01-18 09:57:20作者：翟萌耘Ralph

项目介绍

Rangy 是一个为了解决JavaScript在处理DOM文本选择和范围操作时浏览器兼容性问题而生的开源库。由Tim Down开发，它提供了在不同浏览器之间一致的API来创建、操作和检查文本选择或DOM范围。这对于需要精细控制用户选中文本或进行富文本编辑的Web开发者来说至关重要。Rangy支持现代浏览器以及较旧版本的IE（至IE6起），极大简化了跨浏览器开发的复杂度。

项目快速启动

要迅速开始使用Rangy，首先确保你的项目能够加载到这个库。可以通过CDN或者下载源码后本地引用。以下示例展示了如何通过CDN快速引入Rangy：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Rangy 快速启动</title>
    <!-- 引入Rangy核心库 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/rangy/1.3.0/rangy-core.min.js"></script>
    <!-- 如果你需要额外的功能模块，比如高级选择功能，记得一起引入 -->
    <!-- <script src="path/to/rangy-selectionsaverestore.min.js"></script> -->
</head>
<body>

<div id="content" contenteditable="true">
    编辑我以体验Rangy的选择与操作能力。
</div>

<script>
    // 确保页面已加载完成
    document.addEventListener('DOMContentLoaded', function() {
        var content = document.getElementById('content');
        
        // 创建一个新的范围对象
        var range = rangy.createRange();
        
        // 选取所有内容
        range.selectNodeContents(content);
        
        // 设置选区并高亮显示选中的内容（这里需自定义样式）
        range.highlight('highlightClass'); // 假设你的CSS里有定义 .highlightClass
        
        // 或者，如果你想保存当前选择状态以便后续恢复
        rangy.saveSelection();
        
        // 某时某刻恢复之前保存的选择
        rangy.restoreSelection();
    });
</script>

</body>
</html>

请注意，上述示例中关于.highlightClass的使用是假设性的，实际应用中你需要定义相应的CSS来视觉化突出显示选区。

应用案例和最佳实践

Rangy常用于复杂的富文本编辑器中，比如实现文本高亮、格式化（加粗、斜体等）、拖拽选择等功能。最佳实践包括：

模块化使用：根据需要引入特定模块，如selectionsaveRestore模块用于保存和恢复选区。
封装操作：将Rangy的操作封装成可复用的函数，便于维护和扩展。
性能考虑：在大量数据或频繁操作的情况下，合理安排执行时机，避免UI卡顿。

典型生态项目

虽然Rangy本身并不直接构成一个完整的富文本编辑器生态项目，但它广泛被各种编辑器采用作为底层技术支持，例如TinyMCE、CKEditor等编辑器在其某些高级功能实现中可能依赖于类似的选区管理逻辑。这些编辑器在构建其高级文本编辑特性时，背后的文本选择和操作技术往往借鉴了Rangy这样的解决方案，间接体现了Rangy在富文本编辑生态中的重要地位。

以上就是对Rangy库的一个基本介绍，包含快速启动指南和一些应用场景的概览。希望这能够帮助你快速理解和上手Rangy。

rangy

A cross-browser JavaScript range and selection library.

项目地址：https://gitcode.com/gh_mirrors/ra/rangy

登录后查看全文