简体中文

开发者工具·HTML所见即所得编辑器

所见即所得编辑器如何将格式转换为 HTML：contenteditable 解释

· 工作原理

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

可编辑文档中的粗体短语转变为 HTML 中的重要元素
原始 ToolAcre 矢量图

解释了使任何元素可编辑的 contenteditable 属性，浏览器如何在您键入和格式化时改变 DOM，以及 DOM 如何变成您复制的 HTML。

你按下大胆； <strong> 从哪里来？ - 打开点击按钮和看到标记之间的间隙

标有粗体的工具栏按钮感觉就像画笔，但浏览器必须在文档树中表示结果。选定的短语可以成为 <b> 或 <strong> 元素，具体取决于编辑命令和引擎。开发人员的任务是将这些特定于浏览器的突变转换为 HTML ，另一个页面可以在不接受每个标签或危险属性的情况下读取。您在屏幕上看到的是可编辑的 DOM，而不是具有独立格式化层的文字处理文件。

contenteditable：使页面可编辑的属性 - 解释编辑主机、插入符位置以及浏览器如何拥有编辑行为

contenteditable="true" 使元素成为编辑宿主。浏览器在其内部管理插入符的移动、选择、插入和删除，下面有一个 DOM 树。 ToolAcre 的编辑界面使用此浏览器功能并公开视觉模式和源模式；内容保留在页面中，而不是提交到富文本服务器。粘贴事件会受到单独的关注，因为粘贴的 HTML 可能包含未经检查不得进入受信任文档的元素和属性。

每次击键都是一次 DOM 突变——描述文本节点的增长、元素的包装和分割，以及为什么即使文本看起来没有变化树也会发生变化

键入创建或扩展文本节点；按 Enter 可能会分割一个块；将选择加粗会包围一个范围。两次点击后的精确 DOM 不能保证与开发人员想象的 <strong> 字符串相匹配：浏览器选择不同的元素和嵌套。 ToolAcre 当前使用 document.execCommand 进行格式化。该 API 已被弃用，但这里的每个编辑操作都没有统一实现的直接替换，因此编辑器将其输出视为要规范化的不受信任的输入，而不是规范标记。

从实时 DOM 到 HTML 字符串 — 解释将编辑后的树序列化为您可以复制的标记

为了复制 HTML，编辑器读取编辑界面的innerHTML，并通过元素/属性白名单传递结果字符串。 b 等标签被规范化为语义强；检查允许的链接是否可接受的 URL 方案，同时删除事件处理程序和不相关的属性。源模式还会将其文本通过相同的过滤器，然后再将其放回视觉表面。这是特定于编辑器的清理路径，而不是针对任意用户的敌对内容的通用服务器端 HTML 清理程序。

工作示例：带有粗体短语的两段注释 - 通过键入、选择和粗体显示 DOM，然后显示生成的标记

输入两个段落——“项目更新”和“草稿就绪”——然后在第二个段落中选择“草稿”并按粗体。浏览器可以将 <b>Draft</b> 插入实时 DOM 中。切换到源模式会将其传递给 ToolAcre 的清理程序，该清理程序可以在规范化后在其段落内发出 <strong>Draft</strong> 。尝试在一次性文档中粘贴 <img onerror="..."> 有效负载：输出允许列表不包含图像或事件处理程序属性。该示例说明了为什么您检查生成的标记，而不是假设一次点击具有一个通用 HTML 表示形式。

为什么相同的操作在不同的浏览器中给出不同的标记 - 涵盖特定于浏览器的编辑行为以及编辑器为何标准化其输出

不同的浏览器以不同的方式实现编辑命令、换行符和选择边界。即使相同的可见段落也可以使用不同的嵌套跨度或块元素进行序列化。规范化步骤减少了一些差异，但不会使所见即所得表面成为标准保证的序列化器。 ToolAcre 在视觉结果旁边显示源代码，因此您可以纠正奇怪的嵌套。它的预览在具有沙箱属性的 iframe 中运行，不允许执行任何脚本，从而限制了不安全片段到达该预览的影响。

这不包括什么——协作编辑、撤消堆栈和完整的编辑器框架不在范围之内

此页面不承诺协作编辑、完整的撤消历史记录、精美的电子邮件客户端或完整的编辑器框架。 Contenteditable 本身无法决定第三方 CMS 接受什么标记，并且基于字符串的允许列表不能替代服务器端 HTML5 解析器清理程序，不受信任的用户可以在其中提交内容。沙盒预览是对清理输出的单独防御；两者都不能使任意 JavaScript 或恶意 URL 在每个目的地都是安全的。

要点：编辑器是一个您可以看到的 DOM — 总结了机制以及 ToolAcre 的 HTML WYSIWYG 编辑器如何在不离开浏览器的情况下公开您的格式生成的标记

编辑器是一个您可以查看和检查的 DOM。 ToolAcre 的 HTML WYSIWYG 编辑器为您提供了一种直接方法，可以在浏览器本地将视觉格式化操作与其生成的过滤后的 HTML 进行比较。输入并加粗一次性注释，切换到源模式并仅保留目标实际支持的元素。