简体中文

开发者工具 · HTML WYSIWYG 编辑器

从 Word 或 Google 文档粘贴到 Web 编辑器中时会发生什么

· 工作原理

html 内容可编辑 文本清理

在进入编辑器之前通过允许列表的丰富剪贴板标记
原始 ToolAcre 矢量图

解释富文本粘贴所携带的内容,从 mso 样式到包装元素和字体堆栈,并展示如何在生成的标记到达您的站点之前读取它。

在 Word 中看起来不错 - 打开时粘贴了一篇文章,其间距和字体与网站设计相冲突

从文字处理程序复制的段落可能在源代码上看起来很精美,但到达时却带有与网站冲突的字体、间距和包装。 ToolAcre 不会批量保留该演示文稿。它的粘贴侦听器会在插入原始丰富标记之前拦截该操作,并选择过滤的表示形式。

重要的证据是源视图,而不是第一视觉印象是否类似于原始文档。编辑器故意缩小范围:标题、段落、强调、列表、引用、类似代码的元素和链接可以保留,而布局容器、类名、id 和内联样式属性不属于其输出契约。

剪贴板不仅仅包含文本 - 解释了富文本副本除了纯文本之外还包含 HTML 风格

剪贴板可以公开 `text/html` 和 `text/plain` 进行一次复制操作。处理程序要求两者都提供。当 HTML 有效负载存在时,它会清理该字符串并插入带有 `insertHTML` 的重写片段;仅当缺少丰富的 HTML 时,它才会插入带有 `insertText` 的普通有效负载。

该优先级经过代码验证,适用于该面板,而不是针对每个应用程序的通用声明。它解释了为什么丰富的粘贴可以保留列表,同时失去其外观。源应用程序编写了剪贴板 HTML,但 ToolAcre 的许可列表决定允许哪些部分进入可编辑表面。

此编辑器从丰富的粘贴中删除的内容:不支持的元素、属性和注释

不支持的元素有两种处理方式。未知的普通包装器会被解开,因此它们的文字会保留下来,而脚本、样式、iframe、表单、SVG、MathML 和其他有风险或非编辑器的容器会与其内容一起被删除。评论和文档类型也被丢弃,而不是被带入草稿中。

属性面向第二道门。类、id、样式、数据属性和每个事件处理程序都被删除,因为允许的属性是按元素命名的。这意味着在 ToolAcre 过滤粘贴后,特定于源的类名和内联表示无法与目标样式表对抗,尽管有用的源样式也可能会消失。

为什么特定于源的包装器和样式无法在允许列表中生存

存储库不提供捕获的 Word 或 Google Docs 固定装置,因此本文不会为特定版本发明确切的 `mso-` 类、内部 ID 或包装器序列。它可以说明白名单证明的结果:无论哪个源应用程序提供了类和样式,它们都会被删除。

与来源无关的规则比脆弱的目录具有更强的编辑指导作用。粘贴后检查移除通知。它记录独特的原因,例如不支持的包装器、禁止的属性或拒绝的 URL。该报告告诉您此实现丢弃了什么,而无需假装识别最初生成每个片段的应用程序。

工作示例:粘贴三个段落并读取过滤后的标记

复制三个短段落,将中间的句子设为粗体,将最后一个句子设为列表。粘贴后,切换到源模式。 Paragraph、strong、ul 和 li 元素位于白名单内,而周围的 div 被展开且样式属性消失。旧版 b 和 i 标签标准化为 Strong 和 em。

现在在一次性源示例中添加不安全事件属性并返回到可视模式。该属性在该源变成 DOM 之前被删除。这表明了编辑边界,而不是敌对提交内容的安全发布。该项目明确警告解析器差异,并需要合适的服务器端清理程序来处理不受信任的内容。

仅当剪贴板不提供 HTML 风格时才使用纯文本粘贴

纯文本插入是后备方案,而不是此工具栏中用户可选择的“不带格式粘贴”命令。如果剪贴板提供 HTML,ToolAcre 将采用该分支。浏览器或操作系统快捷方式可能会公开纯粘贴,但存储库不定义或承诺特定的快捷方式行为。

当只有文本可用时,`insertText` 要求浏览器将这些字符放在插入符号处。随后创建的任何段落结构仍受浏览器编辑行为的影响。使用源视图添加有意的标题或列表,而不是假设其他应用程序中的换行符自动成为您的 CMS 期望的结构。

这不包括什么 - 自动清理规则、CMS 特定的粘贴过滤器或保留跟踪的更改

此工作流程不保留跟踪的更改、注释、页面布局、字体、颜色、表格或图像。图像故意不存在,因为允许的图像会创建出站请求和错误处理程序表面。该编辑器也没有特定于源的清理配置文件或保证对一套办公套件保真度的开关。

本地粘贴并不能证明最终目的地将接受相同的子集。 CMS 可以剥离更多标签、重写链接或强制执行自己的策略。将编辑器输出与目标文档进行比较,并在丢失不受支持的格式会删除信息而不仅仅是演示文稿时保留原始副本。

要点:发布前先查看 — 总结检查习惯以及 ToolAcre 的 HTML WYSIWYG 编辑器如何让您在本地粘贴并在标记到达任何地方之前查看标记

发布前查看:粘贴具有代表性的非敏感片段,阅读删除警告,检查源代码并预览过滤结果。 ToolAcre 提供了一份明确的许可名单,而不是默默地将外国演示文稿带入您的网站。这使得清理可见,但它并不能证明任意 HTML 都是安全的。

如果基本结构消失,请使用受支持的标题、段落、列表、重点和链接重建它。如果目标接受的较少,则进一步简化。正确的工件不是对源文档最接近的视觉模仿;它是经过审查的标记,其含义和目标策略都是可以理解的。