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;
} );
}
}