简体中文

开发者工具 · HTML WYSIWYG 编辑器

为什么 execCommand 被弃用以及浏览器编辑器使用什么替代

· 工作原理

html 内容可编辑 开发人员工作流程

通过格式化命令传递到检查的 HTML 中的选定短语
原始 ToolAcre 矢量图

涵盖了 document.execCommand 的兴衰、其输出不一致的原因,以及现代编辑器如何基于 Selection、Range 和 beforeinput 进行构建。

不再安全的单行粗体按钮 - 以 execCommand('bold') 和弃用警告打开

粗体按钮可以是一次调用:聚焦编辑表面,然后要求 `document.execCommand` 将 `bold` 应用到当前选择。 ToolAcre 仍然使用该路径,因为浏览器拥有其 contenteditable 元素内的插入符号和选定范围。紧凑调用很方便,但方便并不意味着其生成的树是可预测的。

该代码将拒绝视为一种普通的可能性。它的命令包装器捕获异常,宣布浏览器拒绝该操作,并将编写器引导至源模式。这种后备措施比承诺一次工具栏单击总是产生一个特定元素或在每个引擎中都以相同的方式工作更诚实。

execCommand 做了什么以及它来自哪里 - 解释了它在早期 Internet Explorer 中的起源以及每个浏览器的采用

相同的包装器驱动粗体、斜体、无序和有序列表、格式删除、撤消、重做、块格式、链接和取消链接。这些是工具栏中实际存在的命令;本文不会使用对齐、颜色、字体、表格、图像或实现从未公开的其他熟悉的富文本功能来扩展该列表。

每个命令都针对实时可编辑 DOM 运行。随后,面板会刷新其源代码、预览、字数统计以及当前innerHTML 中的删除报告。因此,保存的结果不是命令日志。它是浏览器在执行或拒绝请求的操作后留下的任何结构的过滤序列化。

为什么命令 API 被弃用:浏览器可以生成不同的 DOM 形状

弃用很重要,因为 API 没有为编辑器作者提供每个突变的精确结构契约。 ToolAcre 限制明确警告引擎之间的行为有所不同,特别是在嵌套列表方面。可见列表可能是可接受的,但其嵌套或包装器选择与其他浏览器生成的标记不同。

没有存储库源支持每个浏览器、版本或命令都有特定兼容性结果的声明。安全声明的范围更窄:此实现调用已弃用的 API,捕获拒绝,并提供直接源代码编辑作为逃生舱。测试您打算使用的浏览器和操作,而不是推断矩阵。

Selection 和 Range 是相关的替代项,但此工具未实现它们

Selection 和 Range 可以描述选定的 DOM 边界并支持显式树操作,但 ToolAcre 不使用它们实现替换格式化引擎。将这些 API 命名为当前代码路径会错误地描述产品。在这里,浏览器命令仍然是变异器,而消毒剂仍然是输出边界。

自定义模型可以拥有标记、区块、交易和选择映射,但这是具有不同测试的不同产品架构。这个轻量级编辑器故意避免声明此类机制。其可审查的契约是,视觉操作可能会创建依赖于浏览器的 DOM,而源模式则显示实际将被复制或下载的过滤标记。

beforeinput 不是此编辑器格式化路径的一部分

该实现也不会拦截 `beforeinput` 将编辑意图转换为自定义事务。输入事件仅在浏览器更改表面后触发刷新。粘贴和放置是例外:这些事件会被阻止,其剪贴板或传输有效负载会被过滤,并且仅插入生成的 HTML 或纯文本。

这种区别阻碍了广泛的架构主张。 ToolAcre 拥有粘贴门,但不是每个击键突变。普通的键入、删除、回车行为和工具栏命令仍然是浏览器编辑操作。消毒器审查其序列化输出;它不会将编辑器转变为 beforeinput 驱动的框架或标准化每个中间 DOM 突变。

工作示例:检查此编辑器实际生成的遗留命令输出

要进行具体检查,请键入两个短句子,选择一个短语并按粗体。切换到 HTML 源代码并检查该短语周围的元素。 ToolAcre 在清理期间将旧版 `b` 映射到 `strong`,因此即使实时编辑命令最初选择旧版标签,过滤结果也可以是语义的。

重复列表,然后撤消。工具栏发送`insertUnorderedList`和`undo`;它不维护单独的应用程序历史记录。如果浏览器拒绝,状态区域会如此说明。如果嵌套看起来很奇怪,则源模式是受支持的校正路径。观察到的输出,而不是按钮标签,才是证据。

这不包括什么:这里没有实现替换编辑器架构

本文并不声称支持现代替换命令系统、协作事务、确定性跨浏览器树或自定义撤消堆栈。它也不会推断键盘快捷键的行为,因为源定义了工具栏操作,而不是快捷方式注册表。不支持的功能仍然是遗漏而不是隐含的功能。

安全性与命令选择是分开的。许可名单过滤发出的标记,并且预览在没有脚本的情况下进行沙箱处理,但清理程序明确拒绝用作一般恶意输入 XSS 过滤器。接受不受信任的发布内容的服务器仍然需要适当的服务器端 HTML5 解析器清理程序和特定于目标的策略。

要点:拥有 DOM,而不是命令 — 总结迁移路径以及生成的标记如何成为您在所见即所得到 HTML 工具中检查的内容

拥有您可以检查的结果。在此编辑器中,命令要求浏览器改变可内容编辑树,然后允许列表将该树的序列化重写为支持的子集。源模式公开了切换,并在浏览器编辑行为不方便或不一致时提供实用的修复界面。

在与实际工作相同的浏览器中使用一次性示例。仅执行附带的命令,检查链接和嵌套,在依赖之前测试撤消,并仅在阅读后复制过滤后的 HTML。该工作流程尊重弃用,而不假装 ToolAcre 已经取代了底层编辑 API。