小程序富文本展示优化背后的故事

无论是 web 页面还是移动页面，人们在编排内容时往往会添加一些色彩和样式，让整体呈现更加生动美观，这对于丰富业务场景展示、提升用户体验具有非常重要的作用。在众多视觉丰富元素中，富文本脱颖而出，成为了当下业务发展最为重要的需求之一。富文本的优势主要体现在，用户无需关心格式细节，即可制作出美观的文档或内容；作为研发人员，也不需要额外调用复杂的接口或第三方控件，在页面中直接嵌入一小段 HTML 代码即可实现丰富多彩的内容效果。

在不同的业务开发中，研发人员在 B 端所使用的富文本编辑器不尽相同，富文本标签使用的侧重点也略有不同。本文基于业务需求对小程序富文本编辑器进行改造，阐述该组件的设计思路以及部分标签渲染的优化点。

组件设计思路

1. 灵活的设计思路

随着业务的不断发展，编辑器的基础需求难以覆盖所有业务场景。此时，研发人员若想基于已有组件进行二次开发，往往需要修改组件源码。然而，由于大多数富文本编辑器组件设计都较为复杂，存在大量繁杂的代码逻辑和封装逻辑，因此，对于一般的研发人员来说，很难快速上手开发和修改。同时，为了保证组件在更新迭代时能够平滑升级，需要组件研发人员拥有较高水平的开发能力以及对源码有深入的理解。

为此，我们决定对富文本组件采取灵活的设计思路，目的是降低研发人员的使用门槛，提升二次开发的开发效率，让研发人员能够根据业务需求灵活地修改编辑器或对编辑器进行扩展。为此，我们将编辑器的功能模块划分成多个子模块，如功能模块 A、功能模块 B、功能模块 C 等。

通过这种灵活的设计思路，当一个业务场景需要的功能模块仅仅为功能模块 A 时，研发人员只需要在原组件基础上进行 A 模块的相关开发，而无需关心编辑器中其他模块的设计逻辑，也不会产生耦合。这种设计方式，可以极大地降低研发人员二次开发的难度和成本，提升开发效率。

2. 可扩展的富文本标签体系

对于一般的业务场景，大多数 B 端富文本编辑器提供的标签支持数量往往较少，且难以满足丰富的业务需求。然而，由于每个业务场景中业务人员的诉求不同，所需要使用的富文本标签也不尽相同，这也使得富文本编辑器在设计时无法确定标签支持数量，且研发人员若想根据业务需求增加或减少标签支持，也难以在原有编辑器上进行修改。

针对此问题，我们根据不同的标签属性，对标签进行了分类管理，并将这些标签分类抽象成标签组，每个标签组中包含一个或多个标签。同时，我们将多个标签组集合成一个标签体系，研发人员可以通过修改标签体系来快速修改富文本编辑器支持的标签数量，以及对已有标签的修改或删除。通过这种方式，我们实现了对富文本标签体系的可扩展性。

部分标签渲染优化点

1. URL超链接标签

在富文本编辑器的开发中，URL 超链接标签是一个比较常见的标签。一般情况下，当用户在编辑器中点击 URL 超链接标签时，系统会自动跳转到相应的链接页面。然而，当编辑器被嵌入在移动端时，由于系统安全策略的限制，会弹出是否允许跳转的提示框。这种提示框不仅会影响用户体验，而且还会降低页面打开速度。

为了解决该问题，我们对 URL 超链接标签的渲染进行了优化。当用户在编辑器中点击 URL 超链接标签时，我们将使用 a 标签的 href 属性来获取链接地址，然后使用系统的 API 来判断链接地址是否安全。如果链接地址安全，系统会自动跳转到相应的链接页面；如果链接地址不安全，系统会弹出提示框，询问用户是否允许跳转。这种方式可以有效地防止用户点击恶意链接，同时也可以避免弹出提示框，从而提升用户体验和页面打开速度。

2. 图片标签

图片标签也是富文本编辑器中一个非常常见的标签。一般情况下，当用户在编辑器中插入图片时，图片会被直接渲染到编辑器中。然而，由于图片大小不一，当用户插入多张图片时，编辑器中会出现图片堆叠的情况，这不仅会影响用户体验，而且还会降低页面打开速度。

为了解决该问题，我们对图片标签的渲染进行了优化。当用户在编辑器中插入图片时，我们首先会对图片进行压缩，然后将压缩后的图片渲染到编辑器中。这种方式可以有效地减小图片的大小，避免图片堆叠的情况，从而提升用户体验和页面打开速度。

结语

本文基于业务需求对小程序富文本编辑器进行改造，阐述了该组件的设计思路以及部分标签渲染的优化点。通过灵活的设计思路，我们可以降低研发人员二次开发的难度和成本，提升开发效率。同时，通过可扩展的富文本标签体系，我们可以快速修改富文本编辑器支持的标签数量，以及对已有标签的修改或删除。此外，通过对 URL 超链接标签和图片标签的渲染优化，我们可以有效地提升用户体验和页面打开速度。