CKEditor 5 是一款从头开始重新设计的富文本编辑器，可以在 Web 应用程序中快速而轻松地添加文本编辑器，且提供了许多有用的功能。其中， ckeditor5-build-blueberry 是一个基于 CKEditor 5 的 npm 包，提供了基本的文本编辑器功能和预定义的蓝莓主题。
在本篇文章中，我们将会介绍如何通过 npm 安装和使用 ckeditor5-build-blueberry，以及如何使用它的一些基本功能和插件。
安装
首先，需要确保你已经安装了 Node.js 和 npm。打开终端，输入以下命令进行安装：
npm install --save @ckeditor/ckeditor5-build-blueberry
这个命令将会安装 ckeditor5-build-blueberry 和它的所有依赖项。
使用
在你的前端项目中引入 CKEditor 5 的构建版本。
import ClassicEditor from '@ckeditor/ckeditor5-build-blueberry';
这个蓝莓版的 CKEditor 5 构建版本中已经包含了最常用的插件，以及预定义的蓝莓主题。如果你需要自定义你的编辑器，你也可以使用不同的构建版本或者自己配置。
将 ClassicEditor 作为组件的值传递。
-- -------------------- ---- -------
----------
-----
--------- ---------------- ----------------- --
------
-----------
--------
------ ------------- ---- --------------------------------------
------ -------- ---- ---------------------------
------ ------- -
----------- -
--------- ------------------
--
------ -
------ -
------- --------------
-------- ----------------
--
-
--
---------最后，我们将会得到一个带有 CKEditor 5 编辑器的页面。用户可以在上面输入自己的文本，同时也可以使用编辑器提供的工具栏。
功能
CKEditor 5 的功能非常强大，可以满足大多数文本编辑需求。
工具栏
CKEditor 5 的工具栏是编辑器最基本的部分，它提供了各种插件，例如加粗、斜体、下划线、链接等等。
在 ckeditor5-build-blueberry 中预定义了一个蓝莓主题的工具栏，这个工具栏包含了最常用的插件。如果你需要添加或删除插件，可以通过自定义构建来实现。
import ClassicEditor from '@ckeditor/ckeditor5-build-custom';
ClassicEditor.create(document.querySelector('#editor'), {
plugins: [ 'bold', 'italic', 'link' ],
toolbar: [ 'bold', 'italic', 'link' ]
} );图片插入
CKEditor 5 提供了一种简便的方法来插入图片。在菜单栏中选择“图片”选项，在弹出的窗口中，选择要插入的图片文件。
-- -------------------- ---- -------
--------- ---------------- ----------------- ---------------- --
--------
------ ------- -
------ -
------ -
------- --------------
-------- ---
------- -
--------- -
---------- ---------
-
-
--
-
--
---------另外，也可以使用 CKFinder 集成来上传图片。 ckfinder: { uploadUrl: '/upload' } 参数允许您指定上传到哪个地址。
提示框和对话框
CKEditor 5 还提供了一些方便的插件，例如提示框和对话框。
editor.commands.get( 'heading' ).execute( 5 );
这段代码会将所选的文本转换为 H5 标题。确保你的代码中包含了所需的插件，例如“heading”插件。
结论
在本篇文章中，我们学习了如何使用 ckeditor5-build-blueberry npm 包。CKEditor 5 拥有大量的编辑器功能和插件，可以很好地满足各种文本编辑需求。此外，CKEditor 5 的配置也非常灵活，可以满足个性化的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f79238a385564ab69a8