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