wangeditor全屏vue3

在Vue 3中使用WangEditor实现全屏功能，你可以按照以下步骤进行操作：

1. 首先，安装WangEditor的Vue版本：

npm install wangeditor-vue@latest --save

2. 在需要使用WangEditor的组件中，引入WangEditor和样式文件：

import WangEditor from 'wangeditor-vue';
import 'wangeditor/dist/css/wangEditor.min.css';

3. 在组件中注册WangEditor组件：

components: {
  WangEditor
},

4. 在模板中使用WangEditor组件，并设置相关属性：

<template>
  <div>
    <wang-editor v-model="content" :config="editorConfig"></wang-editor>
  </div>
</template>

其中，`v-model`绑定了编辑器的内容，`editorConfig`是编辑器的配置项。

5. 在组件的`data`中定义`editorConfig`对象，设置全屏按钮的配置：

data() {
  return {
    content: '', // 编辑器内容
    editorConfig: {
      menus: [
        'head',  // 标题
        'bold',  // 粗体
        'italic',  // 斜体
        'underline',  // 下划线
        'strikeThrough',  // 删除线
        'foreColor',  // 文字颜色
        'backColor',  // 背景颜色
        'fullscreen'  // 全屏
      ],
      fullscreen: true  // 默认全屏
    }
  };
}

在`menus`中添加了`fullscreen`按钮，并设置其为默认显示。`fullscreen`为`true`表示默认全屏。

6. 最后，可以在样式中设置编辑器的宽度和高度：

<style scoped>
  .wangeditor-container {
    width: 100%;
    height: 400px;
  }
</style>

这样就完成了在Vue 3中使用WangEditor实现全屏功能的配置。你可以根据需求自定义编辑器的样式和其他配置项。