1、显示菜单栏+工具栏+状态栏

<template>
  <el-container>
    <el-header>
      <div><span>校园头条</span><span class="commapp_arrow">></span><span>24小时</span></div>
    </el-header>
    <el-main class="comm-HeadlinesDiv">
      <div class="el-col-md-16 el-col-offset-4">
        <div class="card updaterCard">
          <div class="myUpdateItem ThemeBorderColor4">
            <div class="myUpdateItem_Content">
              <div class="msgContainer msg_textarea_Updater">
                <div class="mentions-input-box">

                  <VueTinymce v-model="h_editHtml" :setting="h_editSetting" />

                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-main>
  </el-container>
</template>


<script>
  import { mapActions } from 'vuex'
  import VueTinymce from '../../components/vue-tinymce/src/vue-tinymce.vue'

  export default {
    name: 'Hours',
    components: {
      VueTinymce
    },
    data() {
      return {
        h_editHtml: '',
        h_editSetting: {
          readonly: false, //readonly为true的话，只能预览
          menubar: true, //menubar为false的话，隐藏菜单栏
          toolbar: "undo redo | fullscreen | formatselect alignleft aligncenter alignright alignjustify | link unlink | numlist bullist | image media table | fontselect fontsizeselect forecolor backcolor | bold italic underline strikethrough | indent outdent | superscript subscript | removeformat |", //工具栏
          toolbar_drawer: "sliding",
          quickbars_selection_toolbar: "removeformat | bold italic underline strikethrough | fontsizeselect forecolor backcolor",
          plugins: "link image media table lists fullscreen quickbars",
          height: 350,
          language: "zh_CN"
        }
      }
    },
    methods: {

    }
  }
</script>

<style>
</style>

效果图

2、显示菜单栏+工具栏

<template>
  <el-container>
    <el-header>
      <div><span>校园头条</span><span class="commapp_arrow">></span><span>24小时</span></div>
    </el-header>
    <el-main class="comm-HeadlinesDiv">
      <div class="el-col-md-16 el-col-offset-4">
        <div class="card updaterCard">
          <div class="myUpdateItem ThemeBorderColor4">
            <div class="myUpdateItem_Content">
              <div class="msgContainer msg_textarea_Updater">
                <div class="mentions-input-box">

                  <VueTinymce v-model="h_editHtml" :setting="h_editSetting" />

                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-main>
  </el-container>
</template>


<script>
  import { mapActions } from 'vuex'
  import VueTinymce from '../../components/vue-tinymce/src/vue-tinymce.vue'

  export default {
    name: 'Hours',
    components: {
      VueTinymce
    },
    data() {
      return {
        h_editHtml: '',
        h_editSetting: {
          readonly: false, //readonly为true的话，只能预览
          menubar: true, //menubar为false的话，隐藏菜单栏
          statusbar: false, //隐藏状态栏
          toolbar: "undo redo | fullscreen | formatselect alignleft aligncenter alignright alignjustify | link unlink | numlist bullist | image media table | fontselect fontsizeselect forecolor backcolor | bold italic underline strikethrough | indent outdent | superscript subscript | removeformat |", //工具栏
          toolbar_drawer: "sliding",
          quickbars_selection_toolbar: "removeformat | bold italic underline strikethrough | fontsizeselect forecolor backcolor",
          plugins: "link image media table lists fullscreen quickbars",
          height: 350,
          language: "zh_CN"
        }
      }
    },
    methods: {

    }
  }
</script>

<style>
</style>

效果图

3、不显示菜单栏+工具栏+状态栏

<template>
  <el-container>
    <el-header>
      <div><span>校园头条</span><span class="commapp_arrow">></span><span>24小时</span></div>
    </el-header>
    <el-main class="comm-HeadlinesDiv">
      <div class="el-col-md-16 el-col-offset-4">
        <div class="card updaterCard">
          <div class="myUpdateItem ThemeBorderColor4">
            <div class="myUpdateItem_Content">
              <div class="msgContainer msg_textarea_Updater">
                <div class="mentions-input-box">

                  <VueTinymce v-model="h_editHtml" :setting="h_editSetting" />

                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
  import { mapActions } from 'vuex'
  import VueTinymce from '../../components/vue-tinymce/src/vue-tinymce.vue'

  export default {
    name: 'Hours',
    components: {
      VueTinymce
    },
    data() {
      return {
        h_editHtml: '有什么新鲜事要告诉大家',
        h_editSetting: {
          toolbar: false, //隐藏工具栏
          menubar: false, //隐藏菜单栏
          inline: true //开启内联模式
        }
      }
    },
    methods: {

    }
  }
</script>

<style>
  .comm-HeadlinesDiv .mce-content-body {
    min-height: 80px;
  }

  .comm-HeadlinesDiv .mce-content-body.mce-edit-focus[contentEditable="true"]:focus,
  .comm-HeadlinesDiv .mce-content-body.mce-edit-focus[contentEditable="true"]:hover {
    outline: 0;
  }
</style>

效果图