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

我就是我 2022-05-16 01:57 147阅读 0赞

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

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

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

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

配置完后的目录结构：  
![这里写图片描述][70]

第三步：定义关联文档插件，定义相应插件的文件夹  
结构如下：  
![这里写图片描述][70 1]  
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源码下载地址][Gitee]

[document_ckeditor5]: https://github.com/ckeditor/ckeditor5-build-decoupled-document
[70]: /images/20220516/e97f3a0588514764889564956e65fe19.png
[70 1]: /images/20220516/ba3b1e6606214b8e853acae59c24243b.png
[Gitee]: https://gitee.com/going100/ckeditorExtend