---

一、前言

在前面的文章中，我们已经对 CKEditor5 有了一定的熟悉，从这篇文章开始，我们将对 CKEditor5 进行配置化——自定义 toolbar 工具栏。

实现的效果图大致如下：

---

二、实现步骤

CKEditor5 的所有功能都是通过插件实现的，不配置插件，编辑器就是一具空壳，什么也做不了。在 37.1.0 版本中，每一个依赖包，就是一个插件：
有些插件是包含了多个工的， 比如 @ckeditor/ckeditor5-basic-styles 包含了 Bold(粗体), Italic(斜体)。
有些插件是相互依赖的，可能需要安装多个包，比如缩进功能。

1. 第一步: 搭建目录结构

仍然跟之前一样，一个 ts 文件，一个 vue 组件，一个 demo6/index.vue 测试页面

接下来我们的侧重点会在 ckeditor6.ts 这个文件中

2. 第二步：配置toolbar工具栏的步骤

要想配置 toolbar 工具栏，总共分成4步：

1. 安装对应的依赖包，这里有查找依赖包的方法 如何找到某项功能的依赖包
2. 导入依赖包的功能，如: import { Bold, Italic } from '@ckeditor/ckeditor5-basic-styles';
3. 设置到插件中
4. 配置 toolbar 属性

我们一步一步来看，首先看到现在的编辑器：

(2-1). 配置粗体和斜体

使用 @ckeditor/ckeditor5-basic-styles 这个包的详细步骤如下：

(2-2). 配置链接和标题+正文

使用 @ckeditor/ckeditor5-link 和 @ckeditor/ckeditor5-heading

(2-3). 配置列表和引用

使用 @ckeditor/ckeditor5-list 和 @ckeditor/ckeditor5-block-quote

(2-4). 配置自动格式化

使用 @ckeditor/ckeditor5-autoformat ，这个插件比较特殊，它不需要配置 toolbar，它是用来触发类似 md 文档的自动格式化功能的，可以查看演示：

经过前面的4个例子，后续我们只要依葫芦画瓢即可，按照4个步骤：安装包、引入插件、使用插件、配置toolbar工具栏。

3. 第三步：更多工具

如果想要寻找更多功能，只需要找这个 功能表 即可。
这里我尽可能引入多的功能进来，以下是我的代码：

import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
import { Essentials } from '@ckeditor/ckeditor5-essentials';
import { Paragraph } from '@ckeditor/ckeditor5-paragraph';
import { Bold, Italic, Underline, Strikethrough, Code, Subscript, Superscript } from '@ckeditor/ckeditor5-basic-styles';
import { Link } from '@ckeditor/ckeditor5-link';
import { Heading } from '@ckeditor/ckeditor5-heading';
import { List }