用于您网站的开源文本编辑器，CKEditor

Digital creative of a browser on the internet

大多数应用程序允许用户创建和添加一些文本内容，例如评论、聊天消息、文章、产品描述或法律文档。如今，纯文本已不足够。用户需要格式化文本、插入图像和表情包、视频、表格，以及创建列表和链接。开发人员或许可以手动用 HTML 编写这些富内容，但您的用户很可能会希望获得一些帮助。

所见即所得 (WYSIWYG) 编辑允许您以类似于最终用户看到的形式查看和编辑富文本内容。WYSIWYG 编辑器提供了一个用户界面，可以轻松地格式化文本，并将图像、链接或表格等各种元素融入到您的数字内容中。

如果您想在您的应用程序中提供此类功能，您可以选择

自行构建
寻找可以重用的 WYSIWYG 编辑器组件

每个选项都有其优点和缺点。

自行构建...

如果您的用例很简单，并且您不需要太多功能，那么构建自己的组件似乎是一个可行的方案。WYSIWYG 编辑听起来很容易。

事实并非如此。

即使您从简单的功能开始，需求也往往会随着时间的推移而增长。内容创建是一种被广泛接受的范例，用户现在期望它在您的应用程序中的工作方式与在其他任何地方都类似。他们希望看到熟悉的功能集和用户体验模式。创建和维护这些需要时间和精力，而这些时间和精力本可以用于开发您的应用程序。

即使在拥有庞大工程团队的大型项目中，内容编辑功能也经常外包给外部库，这是有充分理由的。要做好这项工作，需要深入的领域知识。

假设您决定集成一个现成的编辑组件或框架。市场上有大量的富文本编辑解决方案。它们之间的差异通常围绕功能集、用户体验、与各种技术的集成、可扩展性、许可、受欢迎程度、项目健康状况和支持选项。因此，与任何外部库类似，当您选择编辑器时，最好考虑您的用例，以便您可以避免代价高昂的错误以及未来的迁移。

当然，当您集成 WYSIWYG 编辑组件时，您会面临一些挑战，但是当您使用流行的开源 CKEditor 5 时，这些挑战很容易解决。

或者选择 CKEditor

CKEditor 作为一个开源项目已经存在 20 年了！它由 CKSource 提供支持，这是一家由约 100 人组成的公司，他们日复一日地致力于改进编辑器。最新版本 CKEditor 5 是一个现代、灵活、可扩展且可定制的组件，用纯 TypeScript 和 JavaScript 编写。它构建在强大的、可协作的编辑框架之上，该框架具有模型-视图-控制器 (MVC) 架构、自定义数据模型和虚拟 DOM。

使用 CKEditor 5 在 3 个步骤中运行一个简单的编辑器

以下是将 CKEditor 与简单网站集成的基本步骤。

要启动并运行，请从 CDN 加载编辑器脚本，并调用其 create() 方法来创建编辑器

在 HTML 页面中，添加一个元素作为 CKEditor 5 实例的占位符
```
<div id="editor"></div>
```

加载编辑器构建脚本（此处，从 CDN 加载所谓的经典编辑器构建）

<script
  src="https://cdn.ckeditor.com/ckeditor5/36.0.0/classic/ckeditor.js">
</script>

调用 ClassicEditor.create() 方法以显示编辑器。

<script>
    ClassicEditor
        .create( document.querySelector( '#editor' ) )
        .catch( error => {
            console.error( error );
        } );
</script>

就是这样。一个带有嵌入式 CKEditor 5 的完整网页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CKEditor 5 – Classic editor</title>
    <script 
      src="https://cdn.ckeditor.com/ckeditor5/36.0.0/classic/ckeditor.js">
    </script>
</head>
<body>
    <h1>CKEditor 5 - cool, eh?</h1>
    <div id="editor">
        <p>This is some sample content for my new WYSIWYG editor.</p>
    </div>
    <script>
        ClassicEditor
            .create( document.querySelector( '#editor' ) )
            .catch( error => {
                console.error( error );
            } );
    </script>
</body>
</html>

在浏览器中打开它以测试 WYSIWYG 编辑器

图片来源：

(Anna Tomanek, CC BY-SA 4.0)

高级 WYSIWYG 编辑

是的，只有三个步骤，它就可以运行了。但是这个简单的示例也揭示了外部框架集成商面临的一些典型挑战。

这只是一个简单的 HTML 网站，缺少您的应用程序的整个上下文。
用户界面与您的设计系统不匹配。
您的应用程序是用 React/Angular/Vue 或其他语言编写的。
您不想使用 CDN 脚本，而更喜欢自托管。
编辑器的功能集不是您需要的。
此外，您的一些用户更喜欢 Markdown 而不是 HTML 或 WYSIWYG“魔法”。

那么，您如何解决其中一些问题呢？大多数编辑器组件都允许一定程度的自定义，这仍然比编写自定义脚本来正确处理用户内容创建要便宜。

CKEditor 5 使用基于插件的架构，这提供了出色的可定制性和可扩展性。通过付出一些努力，您可以从一个稳定、流行且可靠的解决方案中受益，该解决方案的设置使其外观和工作方式完全符合您的需求。例如，Drupal 10 将 CKEditor 5 构建到其核心中，并通过自定义插件丰富了它的一些典型的 CMS 功能，例如媒体库。

您可以利用所有这些自定义选项的几种方式是什么？以下是五个展示其多功能性的方法

1. 灵活的用户界面选项

在查看要与您的应用程序集成的组件时，首先要注意的是其用户界面。CKEditor 5 框架提供了几种不同的用户界面类型。例如

第一个示例中使用的经典编辑器提供了一个工具栏，编辑区域放置在页面上的特定位置。当您向下滚动页面时，工具栏保持可见，并且编辑器会随着内容自动增长。
文档编辑器提供了与 Microsoft Word 或 Google Docs 等应用程序类似的编辑体验，其用户界面类似于纸质文档。
如果您正在寻找无干扰编辑，其中内容放置在网页上的目标位置，而编辑器用户界面不会妨碍您，那么您有几个选择。内联编辑器、气球编辑器和气球块编辑器都带有不同类型的浮动工具栏，这些工具栏会在需要时出现。

除此之外，您可以摆弄工具栏以移动按钮、将它们分组到下拉菜单中、使用多行工具栏，或者将一些不常用的按钮隐藏在“三个点”或“更多选项”菜单中。或者，如果您愿意，可以将整个工具栏移动到底部。

您也可能更喜欢采用无头路线。许多项目使用 CKEditor 5 强大的编辑引擎，但与他们自己用 React 等创建的用户界面相结合。最著名的例子是 Microsoft Teams，信不信由你。是的，它正在使用 CKEditor 5。

图片来源：

(Anna Tomanek, CC BY-SA 4.0)

2. 选择功能齐全的编辑器或轻量级编辑器

在数字内容编辑中，没有“一刀切”的解决方案。根据您需要的内容类型，功能集会有所不同。CKEditor 5 具有基于插件的架构，并且功能以高度解耦和精细的方式实现。

如果没有一些指导，很容易迷失在所有可能的功能、子功能和配置选项中。以下是一些有用的资源，可帮助您构建与您的用例完美匹配的编辑器

尝试功能丰富的编辑器演示，以测试一些最流行的功能。
查看演示页面上的其他一些编辑器设置。您可以在ckeditor5-demos 存储库中找到每个演示的完整源代码。
文档的整个功能部分解释了所有 CKEditor 5 功能、可能的配置选项、工具栏按钮和 API。
CKEditor 5 在线构建器是一个快速简便的解决方案，可在 5 个步骤中构建您的自定义编辑器。它允许您选择用户界面类型、插件、工具栏设置和用户界面语言，然后下载现成的编辑器捆绑包。

A full-featured and lightweight WYSIWYG editor.

图片来源：

(Anna Tomanek, CC BY-SA 4.0)

3. 与 JavaScript 框架集成

如果您想以无代码方式测试一些解决方案，在线构建器和演示是一个有趣的游乐场，但您可能需要更紧密的集成。您还可以使用 npm 安装 CKEditor 5，或者使用 webpack 或 Vite 将其与您的应用程序捆绑在一起。CKEditor 5 用纯 TypeScript 和 JavaScript 编写，因此它与所有可用的 JavaScript 框架兼容。

有四个官方集成可用于最流行的框架

Angular
React
Vue.js v2
Vue.js v3

例如，要在 React 中设置经典编辑器（在我的第一个示例中使用），您可以使用以下单行代码

npx create-react-app ckeditor5-classic-demo \
--template @ckeditor/ckeditor5-classic

4. Markdown 和 HTML

对于一些开发人员来说，Markdown 可能感觉就像第二天性。但是，它也有其局限性。例如，对表格的支持非常基础。尽管如此，对于许多用户来说，用 Markdown 编写内容比使用编辑器用户界面来格式化它效率更高。

有趣的部分来了。由于 CKEditor 的自动格式化，您可以在编写时使用 Markdown 语法，编辑器会在您键入时格式化内容。这对于满足高级用户和不熟悉 Markdown 并更喜欢使用 WYSIWYG 用户界面创建富文本的用户的需求来说是一个很好的折衷方案。

5. 不同的输入和输出

自动格式化只是 CKEditor 5 中 Markdown 支持的一个方面。另一个方面是您可以将编辑器配置为将 Markdown 用作其输入和输出格式，而不是 HTML。

Support for Markdown source in CKEditor 5.

图片来源：

(Anna Tomanek, CC BY-SA 4.0)

这是另一个挑战。如果您允许用户在您的应用程序中输入内容，他们可以在那里创建内容，也可以从不同的来源（其他网站、Microsoft Word、Google Docs）粘贴内容。他们自然希望保留粘贴文本的结构和格式。这可能会导致一些讨厌的样式和不需要的元素进入您的内容，而您必须清理它们。与其尝试自行调和这两种潜在的利益冲突，不如依靠一个好的编辑器来为您解决这个问题。

就 CKEditor 5 而言，从 Office 粘贴功能为从 Word 或 Google Docs 粘贴内容提供了出色的支持，保留了结构，并将格式转换为语义内容。

默认的 CKEditor 5 设置还阻止用户添加或粘贴编辑器选择的功能集不支持的元素和样式。如果您作为集成商，将编辑器配置为仅支持链接、列表和基本样式（如粗体或斜体），那么用户将无法添加表格、图像或 YouTube 视频。

再次说明，如果您希望您的编辑器接受您的功能集未涵盖的内容，甚至是不受任何现有 CKEditor 5 功能支持的内容，那么您可以借助所谓的通用 HTML 支持功能来实现这一点。这对于加载在其他工具中创建的现有内容非常有用，并且可以使您迁移到 CKEditor 5 变得更容易。