CKEditor 5 架构简介

本指南介绍了 CKEditor 5 架构的主要支柱。

# 基本 CKEditor 5 架构

# 设计

该框架旨在成为一个高度灵活且通用的平台，用于创建自定义富文本编辑解决方案。同时，它满足了几个目标，使实施功能变得尽可能容易。

• 基于插件的架构。 一切都是插件 - 即使是像支持键入或<p>元素这样的关键功能。您可以移除插件或用您自己的实现替换它们，以实现完全自定义的结果。
• 无模式核心。 核心只做最小的假设，并且可以通过模式进行控制。这将所有决定权都留给了插件，因此也留给了您。
• 协作就绪。 或者更确切地说，实时协作已准备好供您使用！编辑器为树状结构模型实现了操作转换，以及创建无缝协作 UX 所需的许多其他机制。此外，我们提供云基础设施和插件，可在您的应用程序中实现实时协作编辑！查看协作演示.
• 自定义数据模型。 编辑引擎实现了一个树状结构的自定义数据模型，旨在满足多种需求，例如启用实时协作和复杂编辑功能（如表格或嵌套块）。
• 虚拟 DOM。 编辑引擎具有一个自定义的、面向编辑的虚拟 DOM 实现，旨在将浏览器怪癖隐藏在您的视线之外。不再有contentEditable 噩梦！
• TypeScript。 该项目是用 TypeScript 编写的，并提供原生类型定义。这有助于创建更可靠、更易于理解和维护的代码。
• 细粒度、可重用的功能。 功能以细粒度的方式实现。这允许重用和重新组合它们，从而使自定义和扩展编辑器成为可能。例如，图像功能目前由 10 多个插件组成。
• 可扩展性。 整个编辑器架构都旨在实现最大灵活度。代码是基于事件的，并且高度解耦，允许您插入或替换选定的部分。功能之间没有直接依赖关系，并且以标准化方式进行通信。
• 一个美丽的 UI。 文本编辑不仅仅是键入 - 您的用户将需要一个 UI 来创建链接或管理图像。我们认为，适当的 UX 需要精心设计，我们并没有跳过这一部分。对建议的 UI 有疑虑？完全没问题！您可以借助其解耦的 UI，随时为 CKEditor 5 创建自己的自定义界面。
• 质量。 所有官方软件包都具有广泛的测试套件（100% 代码覆盖率只是迈向这一目标的一步）。所有代码都有广泛的API 文档.
• 最少的配置。 为了避免臃肿，功能具有最少的配置。可以通过使用自定义功能重新组合它们来完成对其行为的更深入更改。
• 8 年以上的支持。 它不是另一个明年就会消失的框架，也不是一个在现实生活中失败的概念验证。我们在创建富文本编辑器方面拥有 20 多年的经验，并且日复一日地致力于改进您未来无忧的富文本编辑器。

# 框架结构

该框架由几个npm 包组成。每个包都可以在 CKEditor 5 GitHub 存储库的/packages目录中找到。

有几组包

• 核心库 - 一组作为框架根部的包。
• 编辑器 - 实现各种类型编辑器的包。
• 功能 - 实现最终用户功能的包。
• 主题 - 实现编辑器主题的包。

# 主要组件

CKEditor 5 框架有其 3 个主要支柱

• 核心编辑器架构

  核心编辑器架构由@ckeditor/ckeditor5-core包实现。它包含一些将所有内容粘合在一起的核心类和接口。

  核心编辑器架构的主要目的是为实现编辑器功能奠定基础。因此，它引入了诸如插件和命令之类的概念，它们简化和标准化了实现功能的方式。

• 编辑引擎

  编辑引擎由@ckeditor/ckeditor5-engine包实现。它是框架中最大且最复杂的部分，它实现了自定义数据模型、视图层、转换机制、负责驯服contentEditable的渲染引擎等等。

• UI 库

  标准 UI 库由@ckeditor/ckeditor5-ui包实现。它包含一个简单的 MVC 实现，其主要目标是最好地满足 CKEditor 5 的需求。此外，它引入了编辑器功能要使用的基本 UI 组件。