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

wangEditor是一款轻量、好用的富文本编辑器，但是没有全屏功能。作者提供了实现全屏功能的Demo和插件。我的项目使用vue+springboot前后端分离模式，而我本人是一个写Java的，所以并不十分精通vue。在网上找了很久也没有找到合适的方法，只能自己动手了。在此记录一下，希望可以帮助到其他人。

我是根据插件的的方法进行修改 wangEditor全屏插件.

1. 首先要在vue中安装jQuery（安装完成后可以在package.json中修改版本）

npm install jquery --save

2. 然后在main.js中引入jQuery

import 'jquery'

3. 在wangEditor.vue中代码

<template>
  <div class="clearfix">
    <!-- 富文本编辑框 -->
    <div id="wangEditorElem" style="height:210px;background: #ffffff;" />
  </div>
</template>
<script>
import E from 'wangeditor'
import $ from 'jquery'
export default {
  name: 'WangEditor',
  props: {
    content: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      wEditor: '',
      name: ''
    }
  },
  // 用来回显内容（监控父组件中content变化）
  watch: {
    content: function(newVal, oldVal) {
      this.wEditor.txt.html(newVal)
    }
  },
  mounted() {
    // wangeditor
    this.wEditor = new E('#wangEditorElem')
    // 上传图片到服务器，base64形式
    // this.wEditor.customConfig.uploadImgShowBase64 = true
    this.wEditor.customConfig.uploadFileName = 'myFile'
    this.wEditor.customConfig.uploadImgMaxSize = 5 * 1024 * 1024
    // 上传文件个数
    this.wEditor.customConfig.uploadImgMaxLength = 3
    // 绑定上传图片的后端地址
    this.wEditor.customConfig.uploadImgServer = 'upload.do'
    // 隐藏网络图片
    this.wEditor.customConfig.showLinkImg = false
    this.wEditor.customConfig.menus = [
      'head', // 标题
      'bold', // 粗体
      'fontSize', // 字号
      'fontName', // 字体
      'italic', // 斜体
      'underline', // 下划线
      'foreColor', // 文字颜色
      'quote', // 引用
      'image', // 插入图片
      'code', // 插入代码
      'undo', // 撤销
      'redo' // 重复
    ]

    this.wEditor.customConfig.uploadImgHooks = {
      fail: function(xhr, editor, result) {
        this.$message.error('上传图片失败')
      },
      error: function(xhr, editor) {
        this.$message.error('上传图片出错')
      },
      timeout: function(xhr, editor) {
        this.$message.error('上传图片超时')
      },
      // 自定义上传图片，回显图片
      customInsert: function(insertImg, result, editor) {
        var url = result.data
        // url 是后台返回的上传图片的路径
        insertImg(url)
      }
    }
    // 创建一个富文本编辑器
    this.wEditor.create()
    // 全屏
    $('#wangEditorElem' + " .w-e-toolbar").append('<div class="w-e-menu"><a class="_wangEditor_btn_fullscreen" href="javascript:window.toggleFullscreen(\'' + '#wangEditorElem' + '\')">全屏</a></div>')
    // 富文本内容
    this.wEditor.txt.html(this.content)
    window['toggleFullscreen'] = data => {
        this.toggleFullscreen(data)
    }
  },
  methods: {
    toggleFullscreen: function(editorSelector) {
      $(editorSelector).toggleClass('fullscreen-editor')
      if ($(editorSelector + ' ._wangEditor_btn_fullscreen').text() === '全屏') {
        $(editorSelector + ' ._wangEditor_btn_fullscreen').text('退出全屏')
      } else {
        $(editorSelector + ' ._wangEditor_btn_fullscreen').text('全屏')
      }
    },
    // 获取编辑器中内容
    getContent() {
      return this.wEditor.txt.html()
    },
    setContent() {
      this.wEditor.txt.html(this.content)
    },
    clearContent() {
      this.wEditor.txt.clear()
    }
  }
}
</script>
<style>
  .w-e-menu{
    z-index: 2 !important;
  }
  .w-e-text-container {
    /* 只有加上 ！important设置样式才管用 */
    height: 300px !important;
    z-index: 1 !important;
  }
  .w-e-toolbar {
	flex-wrap: wrap;
	-webkit-box-lines: multiple;
  }

  .w-e-toolbar .w-e-menu:hover{
	z-index: 10002!important;
  }

  .w-e-menu a {
	text-decoration: none;
  }

  .fullscreen-editor {
	position: fixed !important;
	width: 100% !important;
	height: 100% !important;
	left: 0px !important;
	top: 0px !important;
	background-color: white;
	z-index: 9999;
  }

  .fullscreen-editor .w-e-text-container {
	width: 100% !important;
	height: 95% !important;
  }
</style>  

4. 在需要用到富文本的地方调用就可以了

<div>
  <WE ref="we" :content="content" style="height:350px" />
</div>

<script>
import WE from '@/components/wangEditor'
export default {
  name: 'editor',
  components: {
    WE
  },
  data() {
    return {
      content: ''
    }
  }
}  
</script>

写在最后：把wangEditor做为单独组件也是借鉴了很多大佬们成果，这个代码也是融合了一些其他的功能，例如可以被其他元素遮挡（在css中设置）、图片上传等。代码还有很多不足，希望大佬们谅解或者提出改进意见。