ck-editor5的研究 (7)：自定义配置 CKeditor5 的 toolbar 工具栏

一、前言

在前面的文章中，我们已经对 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 } from '@ckeditor/ckeditor5-list';
import { BlockQuote } from '@ckeditor/ckeditor5-block-quote';
import { Autoformat } from '@ckeditor/ckeditor5-autoformat';
import { Image, ImageToolbar, ImageCaption, ImageResize, ImageStyle } from '@ckeditor/ckeditor5-image';

export default class MyClassicEditor extends ClassicEditor {
  static override builtinPlugins = [
    Paragraph,
    Essentials,
    Bold, // 提供 'bold'
    Italic, // 提供 'italic'
    Underline, // 'underline'
    Strikethrough, // 提供 strikethrough
    Code, // 提供 'code'
    Subscript, // 提供 'subscript'
    Superscript, // 提供 'superscript'
    Link, // 提供 'link'
    Heading, // 提供 'heading'
    List, // 提供 'bulletedList' 和 'numberedList'
    BlockQuote, // 提供 'blockQuote'
    Autoformat, // 自动格式化
    Image, // 提供图片基础能力, 比如允许复制图片进入编辑器
    ImageToolbar, // 提供 image.toolbar
    ImageCaption, // 提供 image.toolbar.toggleImageCaption
    ImageResize, // 提供 image.toolbar.toggleImageCaption
    ImageStyle,
    // ImageUpload, // TODO 提供 'insertImage' 和 'image.insert'
  ];

  static override defaultConfig = {
    // 配置工具栏的按钮。可以使用数组，也可以使用一个对象
    // toolbar: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo'],
    // 我这里使用对象形式来配置
    toolbar: {
      items: [
        'heading',
        '|',
        'bold',
        'italic',
        'underline',
        'strikethrough',
        'code',
        'subscript',
        'superscript',
        '|',
        'link',
        'bulletedList',
        'numberedList',
        'blockQuote',
        '|',
        // 'resizeImage', // 也可以在这
        // 'insertImage',
      ],
    },
    image: {
      // 选中图片时出现的菜单
      toolbar: [
        'imageTextAlternative', // 设置图片的 alt 属性
        'toggleImageCaption', // 设置图片底部的 描述文本
        '|',
        {
          name: 'imageStyle:pictures',
          title: 'Style',
          items: ['imageStyle:alignBlockLeft', 'imageStyle:block', 'imageStyle:alignBlockRight'],
          defaultItem: 'imageStyle:block',
        },
        'imageStyle:inline',
        'imageStyle:side',
        'imageStyle:alignLeft',
        'imageStyle:alignRight',
        'imageStyle:alignCenter',
        '|',
        'resizeImage', // 设置图片大小比例
        '|',
        // '|',
        // '|',
        // 'linkImage',
      ],
      // resizeImage 配置项
      resizeOptions: [
        { name: 'resizeImage:original', value: null, label: 'Original' },
        { name: 'resizeImage:custom', value: 'custom', label: 'Custom' },
        { name: 'resizeImage:10', value: '10', label: '10%' },
        { name: 'resizeImage:20', value: '20', label: '20%' },
        { name: 'resizeImage:25', value: '25', label: '25%' },
        { name: 'resizeImage:30', value: '30', label: '30%' },
        { name: 'resizeImage:40', value: '40', label: '40%' },
        { name: 'resizeImage:45', value: '45', label: '45%' },
        { name: 'resizeImage:50', value: '50', label: '50%' },
        { name: 'resizeImage:60', value: '60', label: '60%' },
        { name: 'resizeImage:70', value: '70', label: '70%' },
        { name: 'resizeImage:75', value: '75', label: '75%' },
        { name: 'resizeImage:80', value: '80', label: '80%' },
        { name: 'resizeImage:90', value: '90', label: '90%' },
        { name: 'resizeImage:100', value: '100', label: '100%' },
      ],
      styles: {
        // options: [
        //   {
        //     name: 'side',
        //     title: 'Side image',
        //     className: 'image-side',
        //     modelElements: ['imageBlock'],
        //   },
        //   {
        //     name: 'margin-left',
        //     title: 'Image on left margin',
        //     className: 'image-margin-left',
        //     modelElements: ['imageInline'],
        //   },
        //   {
        //     name: 'margin-right',
        //     title: 'Image on right margin',
        //     className: 'image-margin-right',
        //     modelElements: ['imageInline'],
        //   },
        //   { name: 'inline' },
        //   {
        //     name: 'block',
        //     title: 'Centered image',
        //   },
        // ],
      },
      // Configuration.
      // insert: {
      //   // 默认配置
      //   integrations: ['upload', 'assetManager', 'url'],
      //   // 如果不设置，默认是 'block'
      //   type: 'auto', // 'block', 'inline', 'auto'
      // },
    },
    language: 'en',
  };
}

三、测试效果和细节

在 demo 中测试该组件，可以看到效果，已经相当丰富了：

四、总结

到此为止，我们已经完成了 toolbar 自定义配置。