CKEditor 5 关联文档插件的扩展 （一）

CKEditor 5网上的资料相对来说是比较少的，只能是通过研究官方的英文文档来进行开发。
功能需求：
’就是点击工具栏上的一个按钮，弹出一个窗口，在窗口中选择相应的附件，然后点击确定将选择的文件回写到编辑器中。

这里就需要对编辑器进行插件扩展，才能完成改功能。
第一步：去下载源码进行安装,我是基于document模式的编辑器，如果是经理模式的请下载另外一个版本。
下载document模式的ckeditor5

第二步：就是配置工程
这里不讲解工程配置，可以参考我其他的博客文章。

• 配置支持es6
• npm install
• 由于我需要支持ie11 我还配置了babel 如果不需要支持ie11则不需要进行配置

配置完后的目录结构：

第三步：定义关联文档插件，定义相应插件的文件夹
结构如下：

lang下存放国际化文件
src下存放插件代码
theme下放组件样式相关以及svg图片。

第四步：在src文件夹下添加relFileSel.js：

import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
import RelFileSelUI from './relFileSel/relFileSelUI';
import RelFileSelEditing from './relFileSel/relFileSelEditing';

export default class RelFileSel extends Plugin {
	/**
	 * 定义插件名称
	 */
	static get pluginName() {
		return 'RelFileSel';
	}

	/**
	 * 实现插件的关键接口
	 * RelFileSelEditing 主要实现功能以及注册command ，RelFileSelUI主要是toolbar上按钮定义等
	 */
	static get requires() {
		return [RelFileSelEditing,RelFileSelUI];
	}
}

第五步：实现RelFileSelEditing，该文件主要是插件相关功能的实现，在src/relFileSel下新建一个relFileSelEditing.js文件：

export default class RelFileSelEditing extends Plugin {
     ........省
	/**
	 * @inheritDoc
	 */
	init() {
		const editor = this.editor;
		const t = editor.t;

		// Setup `imageUpload` button.
		editor.ui.componentFactory.add( 'relFileSel', locale => {
			const command = editor.commands.get( 'relFileSel' );
			const button = new ButtonView( locale );
//在工具栏上显示一个按钮
			button.isEnabled = true;
			button.label = t( 'Insert rel file' );
			button.icon = relFileIcon;
			button.keystroke = relKeystroke;
			button.tooltip = true;

//将按钮绑定到前面注册的command
			// Bind button to the command.
			button.bind( 'isEnabled' ).to( command, 'isEnabled' );

			// Show the panel on button click.
			this.listenTo( button, 'execute', () => {
				 this.showRelFileSelPage();
			});

			return button;
		} );
	}
}

Gitee源码下载地址