lowcode 实现 H5 页面个性化配置

[winixt]

问题

业务想要一种【超级】富文本，可以配置：字体颜色、粗体、斜体、下划线、左对齐、右对齐，居中对齐、两端对齐、链接、图片、视频、按钮、点击效果、卡片折叠、数据上报等。

主要难点在于：于富文本之上添加注入各种业务组件的能力。

实现思路

1. 实现类似这篇文章所述的超富文本编辑器，可支持插入自定义组件和区块

能实现这种灵活性的本质在于，这种富文本编辑器不同于传统富文本编辑器，编辑结果是一个 html 字符串，它的编辑结果是一个 json 数据结构，配合一个 render 函数渲染结果。通过扩展 facebook 开源的创造富文本编辑器的框架 lexical 可实现上图效果。

2. 基于常规的可视化搭建系统实现

这种方案目前业界已经比较成熟了，开源的也非常多，目前扩展性做的最好的，当属阿里开源的 低代码引擎，基于这套引擎构建一个 H5 页面个性化配置门槛已经很低了。

小结

两种思路都能实现，并且都可以通过组件的方式快速扩展。但相比起来，无论是社区影响力，研发成本，还是场景适应性，基于 低代码引擎 实现我们的需求，都是一个更好的选择。

实现

要构建一个可视化搭建系统，我们需要：

• 一个编辑器，可视化编辑器，组合物料，生成 Schema
• 一个物料中心，用于管理物料（即各种业务组件，未来还可能会有低代码组件）
• 一个 render sdk，渲染 Schema
• 一个设置器管理中心（可选，前期设置器不多的情况下，可直接内置在编辑器中）

编辑器

如果是 react 技术路线，直接基于官方的 低代码引擎 源码，改改配置，将一些 CDN 资源换成自己可控的地址，即可快速构建出一个 lowcode editor。有些库的 CDN 地址是写死在源码的，这就需要下载源码重新构建，以替换 CDN 地址。

如果是 vue 技术路线，社区也有提供基于 vue 的画布，基于这个也可快速构建一个 lowcode editor。构建好后，额外再编写一些个性化的设计器即可。

物料中心

物料中心主要解决的是物料的开发、构建、发布、文档等功能。核心功能和搭建一个业务组件库差不多（需要处理好版本管理，样式冲突等问题），主要一下几点差别：

• 有些组件编辑器的渲染和真实页面有差异，需要单独为编辑器渲染编译一个入口
• 需要为每个物料提供一份物料描述，描述物料快照和物料配置等，供编辑器使用
• 构建一份整个物料库资源描述，用于编辑器加载物料
• 根据版本号将物料一个个发布到 CDN，以实现物料的动态加载 + 渲染

render SDK

编辑器最终会生成一份 Schema（页面描述），和一份 packages 依赖描述。需要一个 render sdk 加载 packages 依赖，然后根据 Schema 渲染出页面。