@kukejs/kkeditor-full-screen/dist/fullScreen/ui.js

基于 ckeditor 的编辑器全屏功能

import { Plugin } from 'ckeditor5/src/core';
import { ButtonView } from 'ckeditor5/src/ui';
import '../../theme/index.css';
/**
 * 编辑器全屏的工具栏按钮
 *   因为全屏功能修改的是编辑器整体，而不是修改编辑器中的内容
 *   所以不需要实现命令和转换器
 */
export default class FullScreenUI extends Plugin {
    constructor(editor) {
        super(editor);
        /**
         * 定义一个控制是否全屏的变量
         */
        this.set('isFullScreen', false);
    }
    init() {
        const editor = this.editor;
        // 注册一个工具栏按钮
        editor.ui.componentFactory.add('fullScreen', () => {
            // 获取当前编辑器的 DOM
            const buttonView = new ButtonView();
            buttonView.set({
                label: '全屏',
                withText: true
            });
            // 当全屏活动时，使工具栏按钮显示为单击状态
            buttonView.bind('isOn').to(this, 'isFullScreen');
            this.listenTo(buttonView, 'execute', () => {
                if (!this.isFullScreen) {
                    this.openFullScreen();
                }
                else {
                    this.closeFullScreen();
                }
            });
            return buttonView;
        });
    }
    /**
     * 编辑器全屏
     */
    openFullScreen() {
        const editor = this.editor;
        // 获取根节点
        const wrapperElement = editor.ui.element;
        wrapperElement === null || wrapperElement === void 0 ? void 0 : wrapperElement.classList.add('kkeditor-full-screen');
        this.isFullScreen = true;
    }
    /**
     *
     */
    closeFullScreen() {
        const editor = this.editor;
        // 获取根节点
        const wrapperElement = editor.ui.element;
        wrapperElement === null || wrapperElement === void 0 ? void 0 : wrapperElement.classList.remove('kkeditor-full-screen');
        this.isFullScreen = false;
    }
}