fanyunPc_admin/src/components/wangEnduit/index.vue

<template>
  <div class="home">
    <div :id="domId">
      <!-- <p v-html="centert"></p> -->
    </div>
  </div>
</template>

<script>
// 引入 wangEditor
import wangEditor from '../../../static/wangeditor'

export default {
  props: ['domId', 'height', 'width', 'centert'], // 定义当前需要渲染上的dom节点的Id
  data() {
    return {
      editor: null,
      domData: this.domId,
      showCentent: true
      // editorData: ''
    }
  },
  mounted() {
    // eslint-disable-next-line no-undef
    const editor = new wangEditor(`#${this.domData}`)

    // 配置 onchange 回调函数，将数据同步到 vue 中
    editor.config.onchange = (newHtml) => {
      this.$emit('func', newHtml)
    }
    editor.config.menus = [
      // 菜单配置
      'head', // 标题
      'bold', // 粗体
      'fontSize', // 字号
      'fontName', // 字体
      'italic', // 斜体
      'underline', // 下划线
      'strikeThrough', // 删除线
      'foreColor', // 文字颜色
      'backColor', // 背景颜色
      'link', // 插入链接
      'list', // 列表
      'justify', // 对齐方式
      'quote', // 引用
      'emoticon', // 表情
      'image', // 插入图片
      'table', // 表格
      'code', // 插入代码
      'undo', // 撤销
      'redo' // 重复
    ]

    // 创建编辑器

    this.editor = editor
  },
  beforeDestroy() {
    // 调用销毁 API 对当前编辑器实例进行销毁
    this.editor.destroy()
    this.editor = null
  },
  methods: {
    getEditorData() {
      // 通过代码获取编辑器内容
      const data = this.editor.txt.html()
      alert(data)
    }
  }
}
</script>

<style lang="less">
  @height: 156px;
  .home {
    /*width: 65%;*/
    margin: auto;
    position: relative;
    height: 198px;
  }
  .w-e-text-container{
    height: @height !important;/*!important是重点，因为原div是行内样式设置的高度300px*/
  }
  /*.w-e-text-container{*/
  /*  height: 700px !important;!*!important是重点，因为原div是行内样式设置的高度300px*!*/
  /*}*/
</style>