聊聊开发富文本编辑器：range对象

最新推荐文章于 2026-06-26 14:11:40 发布

原创最新推荐文章于 2026-06-26 14:11:40 发布 · 1.7k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html5 #javascript

收录于

javascript 专栏收录该内容

19 篇文章

订阅专栏

本文主要探讨了在开发富文本编辑器过程中，range对象的重要性和使用技巧，通过详实的例子解析了如何利用range对象进行文本选择和操作，为实现高效编辑功能提供关键支持。

 
 这次搞了两篇关于开发富文本编辑器的文章：
 
 聊聊开发富文本编辑器：range对象
 
 聊聊开发富文本编辑器：execCommand方法

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

TGCode

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

rangy-rails:轻轻包裹Rangy javascript库以供您在Rails应用程序中使用的宝石

05-04

兰吉铁路宏伟的编写的简单Rails资产管道包装器，“跨浏览器JavaScript范围和选择库”。 rangy-rails gem包含Rangy核心及其所有模块。 rangy-rails版本将与Rangy的版本保持同步，因为该gem实际上只是增加了将Rangy引入Rails应用程序的便捷方法。 rangy-rails是使用的变体创建的。安装将此行添加到您的应用程序的Gemfile中： gem 'rangy-rails' 然后执行： $ bundle 或将其自己安装为： $ gem install rangy-rails 用法简单的！只需编辑app/assets/javascripts/application.js并对其进行调整即可。这是一个示例示例，其中将包括Rangy及其所有模块： //= require rangy-core //= require rangy-

参与评论您还未登录，请先登录后发表或查看评论

rangy用于confluence编辑器

03-20

用于confluence编辑器改造，为confluence编辑器增加字体设置和字号设置选项可参见 http://blog.csdn.net/keydot2007/article/details/21605411

使用rangy.js获取并控制用户选中的内容(转载 )

sifeimeng的专栏

05-04

2582

转载自： http://keenwon.com/1060.html rangy.js 是一个兼容库（https://code.google.com/p/rangy/），主要用来获取用户鼠标选中的内容。现在很多“分享工具”都有这样的功能，下图是新浪博客的当用户选中一段文字的时候，会出现分享按钮。类似的应用场景非常多：chrome的划词翻译，印象笔记的剪藏，社会化流量分...

gitblog_00092的博客

05-12

819

在Web开发中，处理文本选择和范围操作是一项常需面对的挑战，尤其是在不同的浏览器环境下。这时，[Rangy](https://github.com/timdown/rangy) 这个强大的JavaScript库就可以派上用场了。它是一个完全开源的项目，提供了稳定且跨浏览器的解决方案，旨在解决这个问题。 ## 项目介绍 Rangy是一个专门为JavaScript开发者设计的库，其目标是提供一个统...

Cloudflare 5秒盾逆向实战：从初始化到cf_clearance获取全流程拆解

weixin_30254435的博客

05-16

1031

本文详细拆解了Cloudflare 5秒盾的逆向实战流程，从初始化请求的加密参数解析到最终获取cf_clearance Cookie的全过程。通过解剖环境检测逻辑和关键POST请求数据结构，揭示了如何突破5秒盾的动态验证机制，并提供了实战中的避坑指南和代码示例，帮助开发者有效应对Cloudflare的反爬策略。

React 版本的真开箱即用的富文本编辑器wysiwyg

你是我修复不了的bug，但我会用一生去维护

11-27

733

React 版本的真开箱即用的富文本编辑器 这篇文章推荐的react 版的富文本编辑器名字叫做wysiwyg，第一时间你可能觉得这个名字起的很烂，很难记，但是当你知道它的全称后就很好记了，全称为 What you see is what you get(所见即所得)。这个富文本编辑器是偶然在掘金上看到的，宣传上主打开箱即用，在用过后，确实基本能做到开箱即用，基本下载后，不需要进行什么配置。 Github文档地址官方Demo地址 import React, { Component } from 'react

js range 对象研究

qq178514581的博客

05-18

857

range对象光标对象他有4个常用属性 startContainer startoffset endContainer endoffset 举个例子 range : span 1 div 1 首先startoffset 代表光标在 startContainer的第一个元素后面，撒打算 span有3个子元素 3

JS Range HTML文档/文字内容选中、库及应用介绍

weixin_30821731的博客

11-01

371

一、前面的些话本文的内容基本上是基于“区域范围对象(Range objects)”这个概念来说的。这个玩意，可以让你选择HTML文档的任意部分，并可以拿这些选择的信息做你想做的事情。其中，最常见的Range是用户用鼠标选择的内容(user selection)。本文有不少篇幅就是讲如何将用户的这种选择转换为W3C Range或Microsoft Text Range对象。二、什么是Ra...

html入门难,HTML+CSS入门之打造全网最劲富文本系列之大话技术难点与特色设计

weixin_35724881的博客

06-18

203

本篇文章主要讲述HTML+CSS入门之打造全网最劲富文本系列之大话技术难点与特色设计，希望阅读本篇文章以后大家有所收获，帮助大家对相关内容的理解更加深入。大话富文本技术概要：在web领域，一提到富文本，大伙都觉得很高深，很难，很复杂。但是如果你看了我这篇简短的技术分析，你会发现其实富文本不算高深，称不上很难，只是比较复杂，需要用点心，折腾几回你也能做一个富文本编辑器。下面我将采用“问题+答疑”方式...

【开源我写的富文本】打造全网最劲富文本系列之大话技术难点与特色设计。...

weixin_30575309的博客

05-22

144

文章开始前先上个图：大话富文本技术概要：　　在web领域，一提到富文本，大伙都觉得很高深，很难，很复杂。但是如果你看了我这篇简短的技术分析，你会发现其实富文本不算高深，称不上很难，只是比较复杂，需要用点心，折腾几回你也能做一个富文本编辑器。下面我将采用“问题+答疑”方式聊聊web端富文本。问题一、富文本是怎么形成的？　　有网友在切换【源码】状态下看到一大堆html + c...

YTextEditor:canvas 富文本编辑器，支持中文

07-04

YTextEditor 版本：0.1 作者：YYC ##简介一个Canvas富文本编辑器，支持中文输入。

Web应用高可用架构实战：从单机到负载均衡、CDN、WAF的全栈演进

weixin_30736301的博客

06-19

421

在构建现代Web应用时，高可用与高性能是核心目标。其基础原理在于通过架构解耦与组件分工，将单一应用拆分为可独立扩展的无状态服务。这带来了显著的技术价值：提升系统吞吐量、保障服务连续性并增强安全性。典型的应用场景包括应对突发流量、保障全球用户访问速度以及防御网络攻击。本文聚焦于无状态设计、对象存储（OSS）、负载均衡、CDN加速及WAF防护等热词，深入解析如何将这些组件串联，构建一个从单机部署演进至具备弹性伸缩与全面防护能力的生产级架构，解决文件共享、会话保持、资源加速与安全防护等工程实践中的共性难题。

Python+Selenium+Pytest构建UI自动化测试框架：从设计到实战

最新发布

weixin_30423065的博客

06-26

UI自动化测试是软件测试领域的关键技术，通过模拟用户操作实现界面功能验证。其核心原理在于利用WebDriver协议控制浏览器，执行元素定位、交互操作和结果断言。这项技术的价值在于提升回归测试效率，保障软件质量，尤其适用于敏捷开发和持续集成场景。在工程实践中，Python因其简洁语法和丰富生态成为主流选择，结合Selenium实现浏览器驱动，Pytest提供灵活的测试组织能力。通过分层架构设计，如基础层封装、页面对象模型和数据驱动，可以构建稳定可维护的测试框架。本文聚焦于如何基于Python+Selenium

Sqribble：面向知识产品的文档自动化流水线系统

dggnqzt6462的博客

06-25

329

文档自动化是现代内容生产基础设施的关键环节，其核心在于通过结构化模板、确定性布局算法与云端协同机制，实现从原始内容到合规PDF的零干预交付。它不依赖AI生成语义，而是以规则驱动完成层级识别、分页计算、字体嵌入与目录生成等确定性任务，显著提升白皮书、培训手册、客户案例等批量文档的交付一致性与工程可靠性。本文深入解析Sqribble作为典型代表的架构设计、归一化引擎与模板契约机制，揭示其在知识付费、企业培训与SaaS营销等场景中替代传统Word+InDesign人工排版链路的技术逻辑与实操价值。

javascript前端Range学习笔记

04-02

761

https://github.com/timdown/rangy https://developer.mozilla.org/en-US/docs/Web/API/Range http://www.zhangxinxu.com/wordpress/2011/04/js-range-html%E6%96%87%E6%A1%A3%E6%96%87%E5%AD%97%E5%86%

Rangy 开源项目教程

gitblog_00201的博客

08-23

444

Rangy 是一个JavaScript库，专注于提供跨浏览器的文本选择和范围操作功能。以下是其基本目录结构及其简要说明： ```markdown rangy/ │ ├── LICENSE.txt - 许可证文件 ├── package.json - 项目元数据和依赖管理 ├── README.md ...