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

要在Vue中实现WangEditor全屏功能，可以通过以下步骤实现：

1. 在Vue组件中引入WangEditor，并在mounted()方法中初始化编辑器：

import WangEditor from 'wangeditor'
export default {
  mounted () {
    const editor = new WangEditor(this.$refs.editor)
    editor.create()
  }
}

2. 在编辑器配置中打开全屏功能：

import WangEditor from 'wangeditor'
export default {
  mounted () {
    const editor = new WangEditor(this.$refs.editor)
    editor.config.menus = [
      'bold',
      'italic',
      'underline',
      'strikethrough',
      'eraser',
      'quote',
      'fontfamily',
      'fontsize',
      'head',
      'unorderlist',
      'orderlist',
      'alignleft',
      'aligncenter',
      'alignright',
      'link',
      'unlink',
      'table',
      'img',
      'fullscreen'
    ]
    editor.create()
  }
}

3. 在编辑器中添加全屏样式：

.w-e-fullscreen {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
}

4. 在编辑器中添加全屏事件：

import WangEditor from 'wangeditor'
export default {
  data () {
    return {
      isFullScreen: false
    }
  },
  mounted () {
    const editor = new WangEditor(this.$refs.editor)
    editor.config.menus = [
      'bold',
      'italic',
      'underline',
      'strikethrough',
      'eraser',
      'quote',
      'fontfamily',
      'fontsize',
      'head',
      'unorderlist',
      'orderlist',
      'alignleft',
      'aligncenter',
      'alignright',
      'link',
      'unlink',
      'table',
      'img',
      'fullscreen'
    ]
    editor.create()

    editor.menus.fullscreen = {
      title: '全屏',
      className: 'right',
      click: () => {
        if (this.isFullScreen) {
          editor.$textElem.removeClass('w-e-fullscreen')
        } else {
          editor.$textElem.addClass('w-e-fullscreen')
        }
        this.isFullScreen = !this.isFullScreen
      }
    }
  }
}

这样就可以在WangEditor中实现全屏功能了。