前言
在现代的 Web 应用开发中，受益于 HTML5 等新技术的发展，富文本编辑器已经成为了许多应用不可或缺的一部分。而 CKEditor 也成为了许多开发者选择的一个优秀的富文本编辑器。
本文将介绍 npm 包 @ckeditor/ckeditor5-core 的使用教程，这是 CKEditor 5 的核心模块。本教程详细、深度的介绍了 CKEditor 5 核心模块的安装、配置、使用方法以及示例代码，帮助开发者建立 CKEditor 5 核心模块的使用经验。
安装
用 npm 安装
使用 npm 进行安装是上手 CKEditor 5 最简单的方式。打开终端，输入下面的命令进行安装：
npm install --save @ckeditor/ckeditor5-core
下载源码
你可以在 Github 上下载 CKEditor 5 核心模块的源码。下载后，解压文件夹并放置于你的项目文件夹中。如果你想自己构建模块，请参照 文档。
配置
CKEditor 5 的核心模块支持许多配置参数，可以让你灵活地定制自己的编辑器体验。 CKEditor 5 核心模块 接受一个配置对象，在此对象中定义了所有可配置项。大部分可选项都拥有默认值，这使得定义一个基本的编辑器变得容易。
下面是一个简单的 CKEditor 5 配置对象：
ClassicEditor
.create( document.querySelector( '#editor' ), {
toolbar: [ 'heading', '|', 'bold', 'italic', 'link' ]
} )
.catch( error => {
console.error( error );
} );上述代码中，我们首先创建了一个 ClassicEditor 实例，然后传入了一个 DOM 元素作为第一个参数，表示编辑器的容器。第二个参数则是一个配置对象，定义了编辑器的行为和界面。在此配置对象中，我们指定了工具栏使用的按钮，包含字体样式和链接等。最后，使用 .catch() 方法，对创建的过程中的错误进行捕捉和处理。
更多的配置参数可以在 文档 中找到。
使用
编辑器对象
CKEditor 5 核心模块创建了一个名为 ClassicEditor 的编辑器对象。可以在应用程序中创建 ClassicEditor 实例的任何地方使用。如下所示:
const editor = ClassicEditor.create( document.querySelector( '#editor' ) );
上面的示例中，我们使用 ClassicEditor.create() 方法创建一个编辑器对象。document.querySelector( '#editor' ) 用于找到创建编辑器所需的 HTML 元素。
CKEditor 5 核心模块的 create() 方法返回一个 Promise，受 resolve 后的值为 ClassicEditor 实例。
插件
CKEditor 5 的插件是可插拔的模块，可更具自己的需要对编辑器进行扩展。 CKEditor 5 核心模块 包含一些基本的插件，如 Bold、Heading 等。
只需简单的将想要使用的插件导入应用程序即可：
-- -------------------- ---- -------
------ ------------- ---- ---------------------------------------------
------ ---- ---- --------------------------------------------
------ ------ ---- ----------------------------------------------
-------------
-------- ----------------------- --------- -- -
-------- - ----- ------ --
-------- - ------- -------- -
- -
------ ------ -- -
------------ ------- --- ------------- ------ --
- -
------- ----- -- -
-------------- ----------- --
- --在上面的示例中，我们导入了 CKEditor 5 的 Bold 和 Italic 插件，并将它们传递到了 plugins 配置选项中。toolbar 选项仍然会将工具栏限制在仅包含粗体和斜体按钮。
更多关于插件的内容可以在 文档 中找到。
示例代码
下面是一个基本的示例代码，展示了如何构建 CKEditor 5 核心模块，并在其中添加插件：
-- -------------------- ---- -------
--------- -----
------
------
--------------- - ---- ------ ----------------
------- ----------------------------------------------------------------------------------
-------
------
------------ - ---- ------ -------------
---- ------------------
--------
-------------
-------- ----------------------- --------- -- -
-------- - ---------- ---- ------- --------- ------ -
- -
------ ------ -- -
------------ ------- --- ------------- ------ --
- -
------- ----- -- -
-------------- ----------- --
- --
---------
-------
-------结论
我们希望这篇教程对于使用 npm 包 @ckeditor/ckeditor5-core 的朋友可以提供更多的帮助。文中主要介绍了 CKEditor 5 核心模块安装、配置以及使用方法，并提供了示例代码以方便学习和使用。
CKEditor 5 来自一个非常有经验的团队，有大量的文档和教程可用于参考。我们鼓励开发者阅读 CKEditor 5 的官方文档，并在实践中尝试自己构建富文本编辑器。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedabbfb5cbfe1ea0610838