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

CKEditor 5网上的资料相对来讲是比较少的，只能是经过研究官方的英文文档来进行开发。

功能需求：

’就是点击工具栏上的一个按钮，弹出一个窗口，在窗口中选择相应的附件，而后点击肯定将选择的文件回写到编辑器中。git

这里就须要对编辑器进行插件扩展，才能完成改功能。

第一步：去下载源码进行安装,我是基于document模式的编辑器，若是是经理模式的请下载另一个版本。

下载document模式的ckeditor5es6

第二步：就是配置工程

这里不讲解工程配置，能够参考我其余的博客文章。github

配置支持es6

npm install

因为我须要支持ie11 我还配置了babel 若是不须要支持ie11则不须要进行配置

配置完后的目录结构：

web

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

结构以下：

lang下存放国际化文件

src下存放插件代码

theme下放组件样式相关以及svg图片。npm

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

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;

} );

}

}