一、引言
编辑组件作为 H-ZERO 前端生态中的核心组件之一，其选型直接关系到开发效率和产品质量。面对前端开发中编辑组件的多样选择。本文将为您揭示 H-ZERO 项目中编辑组件选型思路，帮助您轻松应对选型挑战！
二、富文本编辑
H-ZERO 前端团队提供了两种适用于不同场景的富文本编辑组件：
NewRichTextEditor：基于 Quill 2.x 封装，具有轻量级、易于扩展，功能全面且适配移动端的特点，对于有跨端需求的场景更推荐使用。
RichTextEditor：基于 CKEditor 4.x 封装的企业级富文本编辑器，支持多种格式和高级功能。
接下来，给大家分别介绍具体的使用场景：
场景一：评论、回复类场景
❇ 推荐组件：NewRichTextEditor
-
轻量级：意味着它占用的前端资源更少。
-
license 无限制：允许免费用于个人及商业用途。
-
多端适配性好：能很好地适应不同设备间的屏幕尺寸差异。
-
文件上传便捷：支持与标准的 H-ZERO 文件服务绑定。
-
自带预览组件：可以直接支持富文本预览。
-
多语言同屏编辑：提供了强大的多语言内容创建能力，允许用户在同一文档内切换多种语言进行编辑。
-
DataSet 双向绑定：简化开发流程，还提高了开发效率！
场景二：模板编辑类场景
❇ 推荐组件：RichTextEditor
RichTextEditor 组件在支持 DataSet 双向数据绑定、多语言编辑 的同时，对于模板编辑类场景具有以下优势：
-
保留特殊标记与内容保护：可以通过配置使其不自动清理未识别的标签和属性，从而保留 #foreach、#end 等模板引擎所需的特殊标记符。
-
源码视图增强控制：内置的源码视图功能，允许开发者直接查看并编辑生成的 HTML 代码。这对于需要对模板进行精细控制的情况非常有用，比如调整样式、添加额外的数据属性等。
-
版本安全性兼容：已处理 CKEditor 4.x 低版本的安全性问题。
注意事项 1、移动端的使用效果不佳，更适用于 PC 端的使用场景。 2、功能使用受限，因为 license 限制，无法升级到 CKEditor 5.x。
三、代码编辑
随着业务需求的扩展，各产品对在线代码编辑功能的需求也在日益增长。接下来，我们将介绍在H-ZERO平台中，在不同代码编辑场景下的使用情况。
场景一：代码配置类场景
比如：仪表板组件支持 JSON 格式的代码片段配置，如下图所示
❇ 推荐组件：CodeMirror
- 轻量：浏览器加载前端资源更少。
- 支持语法高亮：比如：JSON、yaml、html 等。
- 自动代码格式化：自带的格式化功能可以自动调整代码布局，减少了因格式错误而引发的问题。
场景二：代码开发、调试类场景
比如：飞搭的前端自定义脚本功能
❇ 推荐组件：Monaco Editor
注意事项 1、代码智能提示需要开发者根据实际情况去自行定制。 2、断点调试能力没有提供标准服务，如有需求可以联系飞搭产品同事进行交流
综上所述，建议各业务团队根据实际业务需求进行编辑类组件选型。如有疑问，可在开放平台提交咨询工单进行反馈。
欢迎试用
我们将持续优化增强编辑组件，优化客户体验。如果你有更好的想法和建议，欢迎您积极反馈给我们。
● 帮助与反馈
