vue2在TinyMCE把工具栏和写作区域分开

Vue2 中可以使用 TinyMCE 这个富文本编辑器时，将工具栏和写作区域分开通常是为了提供更好的用户体验，比如使得界面更清晰，同时方便用户专注于内容创作。要实现这个功能，你可以按照以下步骤操作：

1. 首先，在 Vue 组件中安装 TinyMCE，可以通过 npm 安装：`npm install tinymce@latest`

2. 导入并配置 TinyMCE，创建一个新的 Vue 实例，并在模板上渲染编辑器。例如：

<template>
  <div class="editor-container">
    <tinymce :config="tinymceConfig" ref="tinymceInstance"></tinymce>
    <button @click="toggleToolbar">显示/隐藏工具栏</button>
  </div>
</template>

<script>
import { createApp } from 'vue';
import { TinyMceComponent } from 'tinymce-vue';

export default {
  components: {
    TinyMceComponent,
  },
  data() {
    return {
      tinymceConfig: {
        selector: '#editor',
        plugins: ['advlist', 'lists', 'link'],
        toolbar: 'undo redo | styleselect bold italic underline strikethrough | bullist numlist outdent indent alignleft aligncenter alignright justifyblock | removeformat', // 默认工具栏
        hide_toolbar: true, // 初始状态隐藏工具栏
      },
      showToolbar: false,
    };
  },
  methods: {
    toggleToolbar() {
      this.showToolbar = !this.showToolbar;
      if (this.showToolbar) {
        this.$refs.tinymceInstance.focus();
        this.$refs.tinymceInstance.showToolbar();
      } else {
        this.$refs.tinymceInstance.hideToolbar();
      }
    },
  },
};
</script>

<style scoped>
.editor-container {
  display: flex;
  height: calc(100% - 50px); /* 减去顶部工具栏高度 */
}

在这个例子中，我们使用了 `hide_toolbar` 属性来控制初始时工具栏是否隐藏，然后通过点击按钮 `toggleToolbar` 来切换工具栏的显示或隐藏。