富文本粘贴怎么设计？格式保留与清理规则

富文本粘贴要把内容结构和视觉格式分开处理：标题、列表、链接和表格决定内容关系，字体、颜色、字号决定外观。知识库编辑器可默认匹配当前样式，同时保留支持的结构；再提供保留来源格式、纯文本粘贴等明确选项。粘贴后要能撤销本次插入，遇到图片失败或不支持的结构时，应指出损失并给出恢复入口。

假设客服把 Word 中的“补寄安排”贴进知识库：一行蓝色标题、两条项目列表、“物流说明”链接、一张两列表格和一张包装照片一起进入编辑器。先把这段内容的三种结果放在同一页，用Pixso 的界面设计与组件协作比较操作面板、内容层级和异常提示，比只画一个粘贴按钮更容易发现格式规则的冲突。

先固定一段样本，才能比较三种粘贴结果

本例样本的标题是“补寄安排”，列表依次为“核对订单”“确认收件信息”；链接文字为“物流说明”；表格表头为“物品、数量”，数据为“替换耳垫、1”；图片说明为“包装外观”。这些内容由知识库编辑者提供，设计练习固定其顺序和文字，仅改变格式处理方式。

三种模式应该按最终结果命名。“保留格式”如果实际上只保留加粗而删除表格，就需要更具体的说明；“匹配当前样式”也不应把标题降成正文。下表是本例编辑器的设计规则，实际保留能力需要在选定的编辑器和粘贴来源中验证。

表格中的差别影响读者理解。标题字号变小仍可能是标题，列表的圆点变了仍可能是列表；但两列表格被拼成一长句，就可能无法判断“1”属于哪种物品。评审要先确认结构关系，再比较与目标文章是否协调。

默认匹配样式，保留对当前片段的改选机会

知识库通常有统一排版，本例因此采用“匹配知识库样式”作为默认行为。编辑者粘贴后，片段按当前文章样式出现，附近显示短提示“已匹配文章样式”，并提供“更改粘贴方式”。多数简单粘贴无需先被弹窗打断；当可能丢失图片或复杂表格时，再给足以判断的说明。

改选面板只作用于刚粘贴的片段，选项可配一句结果描述：“保留来源格式：保留支持的字体与颜色”“匹配文章样式：保留结构并统一外观”“仅保留文字：移除链接关系与图片”。不把含义不同的“清除格式”塞进同一组，假装它等同于重新粘贴。

选项的持续范围也要明确。本次改为纯文本，不应无提示地把以后所有粘贴都改成纯文本。若产品提供长期偏好，可以另设“以后默认使用此方式”，由用户主动选择；界面要能看见当前默认，而不是下一次粘贴丢图时才发现设置变了。

提示位置应跟随粘贴片段的可见范围，不能盖住刚插入的首行或把编辑光标推走。内容很长时，可在编辑区边缘显示简短结果，并提供定位到片段的动作。用户已经开始继续编辑后，过期的粘贴面板不应突然覆盖新内容。

“清除格式”处理选区，不能冒充撤销或删除

粘贴完成后，编辑者可能只选中其中一行，想去掉蓝色字体。此时清除格式作用于当前选区；撤销粘贴则应恢复本次插入前的内容；删除选区直接移除文字。三个动作的影响对象不同，图标、名称和反馈也应不同。

TinyMCE 工具栏文档分别列出纯文本粘贴模式和移除当前选区格式的操作，说明这两类能力有明确分工。自己的产品仍需决定清除哪些格式：只清除颜色、字体等行内样式，还是连标题层级、列表结构也重置，必须在设计与实现中使用同一套规则。

本例选择让“清除文字样式”去掉行内颜色、字体与强调效果，同时保留标题和列表结构；需要将标题改为正文时，使用段落样式选择器。这样，客服清掉标题的蓝色后，“补寄安排”仍能作为知识库小节被识别。若所选编辑器不能实现这一行为，就应调整控件名称和承诺，而不是把差异留给用户猜。

光标位置与一次撤销，决定用户能否放心试

先区分光标插入和选区替换。光标位于“补寄流程”段落后时，整段样本应插在此处；如果用户已经选中旧的一段安排，粘贴则替换该选区。原型中要画出选择范围，否则同一张“粘贴成功”画面无法判断旧内容是正常保留还是意外重复。

本例把一次粘贴及紧接着的模式切换视为同一次插入选择。用户从匹配样式改为纯文本后，执行撤销应恢复粘贴前的文章，包括被替换的旧选区。这是需要与开发约定的交互目标，不能假定所有富文本组件默认这样处理。

用户在粘贴片段里继续打字后，撤销历史就出现新的编辑动作。此时再改变粘贴方式，可能覆盖后续修改。可在发生继续编辑后收起专属改选入口，保留常规格式操作；若仍允许重选，则应明确影响范围，并保住用户后来写入的内容。不能只因为还存着剪贴板原始值，就直接重建整段文档。

图片、宽表格和链接要分别交代结果

照片未成功导入时，保留它在段落中的位置，用“包装照片未导入”占位，并提供重新上传或移除占位的操作。不要显示一张永远转圈的图，也不要让失败占位看起来像已经保存好的图片。文字部分已经插入时，可以继续编辑，但应让未完成项目保持可见。

长表格需要判断是否保住单元格关系。表格可横向滚动或按产品规则调整列宽，但不能靠裁掉右侧列来让页面看似整齐。遇到合并单元格等不支持结构时，提示具体对象和处理结果，例如“此表格的合并单元格未保留”，并允许撤销或改用文本粘贴；不要只提示“部分格式有变化”。

链接则需要核对可见文字与目标是否仍对应。“物流说明”四个字还在，不代表跳转关系仍在。纯文本模式取消链接关系是已说明的规则；匹配样式模式若不小心丢了链接，属于与承诺不符。设计演示可让评审者分别选择链接文字，查看每种结果应出现什么编辑操作。

格式整理与HTML内容过滤也有不同职责。TinyMCE 内容过滤文档单独说明允许的元素和属性规则。视觉上已经清理成黑白文本，不能作为内容安全已处理的证据；过滤策略应由开发落实，产品界面则负责说明哪些用户内容未被接受。

让三份结果保持同源，再测试一次错误选择

在 Pixso 画布上放置同一段“补寄安排”的三份结果：保留来源格式、匹配知识库样式、仅保留文字。让标题、两条列表、物流说明链接和物品表格处在对应位置，再把粘贴选项面板与这三份结果连接起来。用组件保持工具栏一致，只改变被粘贴片段及其反馈。

先请一位编辑者选择“适合发布到统一知识库”的方式，再让他改用纯文本并尝试恢复。观察他能否预测照片会不会保留、链接是否仍可点击、物品数量还能否读懂。随后把光标改为选中旧段落，重走一次粘贴与撤销，核对旧内容是否回来。

可在 Pixso 中排出粘贴前后的对照页面，把“整段新增”和“替换选区”分成两条演示路径。讨论结束后，为样本里的标题、列表、链接、表格、图片各写一个确定结果，再交给开发用真实剪贴板样本验证。稿面看起来整齐，只能说明排版协调；内容关系保住了、误选能够恢复，才说明这次粘贴完成了编辑任务。