@itshixun/qckeditor-plugin-fullscreen

CKEditor 5 插件：全屏编辑模式。点击工具栏按钮切换编辑器全屏/退出全屏。

安装

npm install @itshixun/qckeditor-plugin-fullscreen
# 或
pnpm add @itshixun/qckeditor-plugin-fullscreen

依赖 ckeditor5（peerDependencies，需自行安装）。

基本使用

1. 引入样式

import '@itshixun/qckeditor-plugin-fullscreen/dist/index.css';

2. 注册插件

import { ClassicEditor } from 'ckeditor5';
import { FullScreen } from '@itshixun/qckeditor-plugin-fullscreen';

const editor = await ClassicEditor.create(element, {
  plugins: [
    // ... 其他插件
    FullScreen,
  ],
  toolbar: [
    // ... 其他按钮
    'fullScreen',  // 工具栏按钮名称：全屏
  ],
  fullScreen: {
    // 可选：自定义 z-index，默认 1000
    zIndex: 2000,
  },
});

3. Vue 中使用

<script setup lang="ts">
import { ClassicEditor } from 'ckeditor5';
import { FullScreen } from '@itshixun/qckeditor-plugin-fullscreen';

const config = {
  editor: ClassicEditor,
  plugins: [/* ... */, FullScreen],
  toolbar: ['bold', 'italic', 'fullScreen'],
  fullScreen: {
    zIndex: 2000,
  },
};
</script>

<template>
  <ckeditor :editor="config.editor" :config="config" />
</template>

配置项

| 属性 | 类型 | 必填 | 说明 | |------|------|------|------| | zIndex | number | 否 | 全屏模式下的 z-index，默认 1000 |

命令说明

fullScreen — 切换全屏模式

// 手动切换全屏状态
editor.execute('fullScreen');

// 获取当前全屏状态
const isFullScreen = editor.commands.get('fullScreen')!.value;

插件行为

1. 点击工具栏按钮进入全屏模式
2. 全屏时编辑器占据整个视口，工具栏置顶
3. 再次点击按钮退出全屏，恢复原始布局
4. 全屏时自动隐藏页面滚动条

类型支持

导入插件后，EditorConfig 类型自动扩展：

const config: EditorConfig = {
  // 无类型错误，fullScreen 已声明
  fullScreen: {
    zIndex: 2000,
  },
};

导出 API

import {
  FullScreen,           // 主插件（Editing + UI）
  FullScreenEditing,    // 编辑插件（注册 fullScreen 命令）
  FullScreenUI,         // UI 插件（工具栏按钮）
  FullScreenCommand,    // 全屏命令
  type FullScreenConfig,
} from '@itshixun/qckeditor-plugin-fullscreen';