1、顯示菜單欄+工具欄+狀態(tài)欄

<template>
  <el-container>
    <el-header>
      <div><span>校園頭條</span><span class="commapp_arrow">></span><span>24小時(shí)</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的話谜诫，只能預(yù)覽
          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小時(shí)</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的話喻旷，只能預(yù)覽
          menubar: true, //menubar為false的話生逸，隱藏菜單欄
          statusbar: false, //隱藏狀態(tài)欄
          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、不顯示菜單欄+工具欄+狀態(tài)欄

<template>
  <el-container>
    <el-header>
      <div><span>校園頭條</span><span class="commapp_arrow">></span><span>24小時(shí)</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 //開啟內(nèi)聯(lián)模式
        }
      }
    },
    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>

效果圖