使用wangEditor在vue中实现全屏的功能

要在 Vue 中使用 wangEditor 实现全屏功能，可以按照以下步骤进行：

1. 安装 wangEditor：

npm install wang-editor --save

2. 在需要使用的组件中引入 wangEditor：

import wangEditor from 'wangeditor'

3. 在组件的 mounted 钩子函数中初始化 wangEditor：

mounted() {
  const editor = new wangEditor(this.$refs.editor)
  editor.create()

  // 添加全屏按钮
  editor.config.menus = editor.config.menus.map(item => {
    if (item === 'fullscreen') {
      return Object.assign(item, {
        className: 'w-e-icon-enlarge2',
        title: '全屏'
      })
    }
    return item
  })
}

4. 在 CSS 文件中添加全屏样式：

.w-e-toolbar .w-e-menu .w-e-menu-fullscreen:before {
  content: "\e68c";
}
.w-e-editor-container.w-e-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  background-color: #f1f1f1;
}

5. 在 wangEditor 的配置对象中添加全屏功能：

editor.config.menus = [
  // ... 其他菜单项
  'fullscreen'
]

editor.config.onchangeFullscreen = (isFullscreen) => {
  if (isFullscreen) {
    this.$refs.editorWrapper.classList.add('w-e-fullscreen')
  } else {
    this.$refs.editorWrapper.classList.remove('w-e-fullscreen')
  }
}

这样就可以在 Vue 中使用 wangEditor 实现全屏功能了。