分享一款前端富文本编辑器 CKEditor:工具栏的配置(二)

摘要

本文深入探讨了在 Vue3 中配置 CKEditor 工具栏的方法。我们首先介绍了如何初始化 CKEditor 编辑器，并通过简单的配置实现了基本的工具栏显示。接着，我们分析了 CKEditor 的源码结构，了解了工具栏选项是如何组织和配置的。通过源码分析，我们可以灵活地定制工具栏，满足不同项目的需求。

在上一篇文章中，我们学习了如何在 Vue3 中初始化 CKEditor。今天，我们将继续深入探讨 CKEditor 工具栏在Vue3中的配置。

接下来，我们将重点关注如何定制和配置 CKEditor 的工具栏，以满足我们项目中的特定需求。CKEditor 提供了丰富的工具栏选项，包括文本格式化、插入媒体、表格编辑等功能。通过灵活地调整工具栏的设置，我们可以根据项目要求，精确地控制编辑器的功能和外观。在本文中，我们将学习如何通过简单的配置和定制，使 CKEditor 工具栏更符合我们的实际需求。

CKEditor 关于配置的官方文档: ckeditor.com/docs/ckedit...

CKEditor 关于配置项的文档: ckeditor.com/docs/ckedit...

如何配置工具栏及选项?

vue 复制代码

<script setup>

import ClassicEditor from "@ckeditor/ckeditor5-build-classic";

const editor =  ClassicEditor
const editorData =   '<p>Content of the editor.</p>'
const editorConfig = {
  toolbar: [ 'heading'],
}

</script>

<template>
  <div class="container" id="main">
    <ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
  </div>
  <!--  <RouterView />-->
</template>

<style scoped lang="less">
.container {
  width: 100%;
  height: 100%;
  background: #000;
  padding: 40px;
}
</style>

在 ckeditor 组件中对外暴漏 config 对象作为配置项, 此时我们只需要通过配置 editorConfig.toolbar 属性来控制要显示的工具栏选项。

分析

在编辑器初始化之后访问 editor.defaultConfig.toolbar.items 可以获得当前编辑器下默认的工具栏选项

js 复制代码

Array.from(editor.defaultConfig.toolbar.items)
// ['undo', 'redo', '|', 'heading', '|', 'bold', 'italic', '|', 'link', 'uploadImage', 'insertTable', 'blockQuote', 'mediaEmbed', '|', 'bulletedList', 'numberedList', 'outdent', 'indent']

通过打印 console.log(editor); 可以看到 ClassicEditor 的类

js 复制代码

/**
 * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
 * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
 */

// The editor creator to use.
import { ClassicEditor as ClassicEditorBase } from '@ckeditor/ckeditor5-editor-classic';

import { Essentials } from '@ckeditor/ckeditor5-essentials';
import { CKFinderUploadAdapter } from '@ckeditor/ckeditor5-adapter-ckfinder';
import { Autoformat } from '@ckeditor/ckeditor5-autoformat';
import { Bold, Italic } from '@ckeditor/ckeditor5-basic-styles';
import { BlockQuote } from '@ckeditor/ckeditor5-block-quote';
import { CKBox } from '@ckeditor/ckeditor5-ckbox';
import { CKFinder } from '@ckeditor/ckeditor5-ckfinder';
import { EasyImage } from '@ckeditor/ckeditor5-easy-image';
import { Heading } from '@ckeditor/ckeditor5-heading';
import { Image, ImageCaption, ImageStyle, ImageToolbar, ImageUpload, PictureEditing } from '@ckeditor/ckeditor5-image';
import { Indent } from '@ckeditor/ckeditor5-indent';
import { Link } from '@ckeditor/ckeditor5-link';
import { List } from '@ckeditor/ckeditor5-list';
import { MediaEmbed } from '@ckeditor/ckeditor5-media-embed';
import { Paragraph } from '@ckeditor/ckeditor5-paragraph';
import { PasteFromOffice } from '@ckeditor/ckeditor5-paste-from-office';
import { Table, TableToolbar } from '@ckeditor/ckeditor5-table';
import { TextTransformation } from '@ckeditor/ckeditor5-typing';
import { CloudServices } from '@ckeditor/ckeditor5-cloud-services';

export default class ClassicEditor extends ClassicEditorBase {
	public static override builtinPlugins = [
		Essentials,
		CKFinderUploadAdapter,
		Autoformat,
		Bold,
		Italic,
		BlockQuote,
		CKBox,
		CKFinder,
		CloudServices,
		EasyImage,
		Heading,
		Image,
		ImageCaption,
		ImageStyle,
		ImageToolbar,
		ImageUpload,
		Indent,
		Link,
		List,
		MediaEmbed,
		Paragraph,
		PasteFromOffice,
		PictureEditing,
		Table,
		TableToolbar,
		TextTransformation
	];

	public static override defaultConfig = {
		toolbar: {
			items: [
				'undo', 'redo',
				'|', 'heading',
				'|', 'bold', 'italic',
				'|', 'link', 'uploadImage', 'insertTable', 'blockQuote', 'mediaEmbed',
				'|', 'bulletedList', 'numberedList', 'outdent', 'indent'
			]
		},
		image: {
			toolbar: [
				'imageStyle:inline',
				'imageStyle:block',
				'imageStyle:side',
				'|',
				'toggleImageCaption',
				'imageTextAlternative'
			]
		},
		table: {
			contentToolbar: [
				'tableColumn',
				'tableRow',
				'mergeTableCells'
			]
		},
		// This value must be kept in sync with the language defined in webpack.config.js.
		language: 'en'
	};
}

这个类叫做 ClassicEditor，是基于 ClassicEditorBase 创建的。它定义了一些静态属性和方法，用于配置和管理 CKEditor。

builtinPlugins 属性是一个数组，包含了 CKEditor 内置的各种插件，比如文本样式、图像插入、表格编辑等。

defaultConfig 属性定义了编辑器的默认配置选项，包括工具栏的布局和按钮的排列顺序，以及图像和表格插入时的相关设置。

工具栏选项是在 defaultConfig 的 toolbar.items 属性中设置的。每个按钮名称对应一个编辑器功能，比如撤销操作、重做操作、标题设置等。

这样的设计让用户可以轻松地自定义编辑器的工具栏，根据自己的需求添加或删除按钮，以满足不同的使用场景。

经过源码分析，可以发现每个工具栏选项都是一个独立的组件。通过引入这些组件，并在 toolbar.items 中进行配置，我们可以加载和展示这些组件。可以传入字符串,也可以传出一个对象进行复杂的配置。同时，父级配置也支持对工具栏选项进行单独的定制。

js 复制代码

const editorConfig = {
  toolbar: [
    'Heading',
    {
      label: 'Basic styles',
      icon: 'text',
      items: ['bold', 'italic']
    }
  ],
}

下面截图展示所有支持的插件。

结语

CKEditor 是一个功能强大且高度可定制的富文本编辑器，适用于各种 Web 应用程序。通过本文的学习，我们了解了在 Vue3 中如何配置 CKEditor 的工具栏，掌握了定制工具栏选项的方法。然而，虽然 CKEditor 提供了丰富的功能和灵活的配置选项，但在实际应用中，也需要注意一些缺点，比如配置复杂度较高，对性能要求较高等。因此，在选择和使用 CKEditor 时，需要权衡其优缺点，结合项目需求做出合适的选择。