ckeditor5 全屏功能

RT 在ckeditor4的时候 我们可以在配置中添加一个属性 ‘maximize’ 就可以有个全屏或者缩小成默认的的按钮.
但是在ckeditor5的时候,这个功能被废弃了,笔者也找了一大堆资料

前两个都是开发者关于这个问题的解答


在此使用的时候,也会遇到在一个编辑器里使用多种文本模式报错的问题,详情解决方法可以看我上一篇文章 这里不再过多赘述.

准备工作

1.下载一份源码

git clone -b stable https://github.com/ckeditor/ckeditor5-build-classic.git
npm i

2.在src下新建一个文件 名字随便取

import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
import ImageFullBig from '../icons/fullscreen-big.svg';
import ImageFullCancel from '../icons/fullscreen-cancel.svg';
import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
import '../css/style.css';

export default class FullScreen extends Plugin {
	init() {
		const editor = this.editor;
		editor.ui.componentFactory.add( 'fullScreen', locale => {
			const view = new ButtonView( locale );
			let etat = 0; //
			view.set( {
				label: '全屏',
				icon: ImageFullBig,
				tooltip: true
			} );
			view.on( 'execute', () => {
				if ( etat == 1 ) {
					
					editor.sourceElement.nextElementSibling.removeAttribute( 'id' );
					document.body.removeAttribute( 'id' );
					view.set( {
						label: '全屏',
						icon: ImageFullBig,
						tooltip: true
					} );
					etat = 0;
				} else {
					editor.sourceElement.nextElementSibling.setAttribute( 'id', 'fullscreeneditor' );
					document.body.setAttribute( 'id', 'fullscreenoverlay' );
					view.set( {
						label: '默认',
						icon: ImageFullCancel,
						tooltip: true
					} );
					etat = 1;
				}
			} );

			return view;
		} );
	}
}

将这份代码复制进去 注意 上面引用的包不用继续下载 不然会报错 他在npm中已经有了
都完成 就可以npm打包了
上面的css以及图标我已经传入gitee里了
点击跳转gitee