@tinymce/tinymce-vue自定义

### 使用 `@tinymce/tinymce-vue` 组件库自定义配置和样式的指南

#### 安装依赖包
为了确保安装的是兼容 Vue 3 版本的 TinyMCE 插件，需执行如下命令来安装指定版本的插件[^2]:

npm install --save "@tinymce/tinymce-vue@^4"

#### 配置 Tinymce 编辑器选项
TinyMCE 提供了丰富的编辑器配置项，允许开发者根据需求调整功能特性。这些配置可以通过 props 属性传递给 `<editor>` 组件。

import { defineComponent } from 'vue';
import Editor from '@tinymce/tinymce-vue';

export default defineComponent({
  components: {
    Editor,
  },
  data() {
    return {
      editorConfig: {
        height: 500, // 设置高度
        menubar: false, // 是否显示菜单栏
        plugins: [
          'advlist autolink lists link image charmap print preview anchor',
          'searchreplace visualblocks code fullscreen',
          'insertdatetime media table paste code help wordcount'
        ],
        toolbar:
          'undo redo | formatselect | bold italic backcolor | \
           alignleft aligncenter alignright alignjustify | \
           bullist numlist outdent indent | removeformat | help'
      }
    };
  }
});

#### 添加自定义样式
对于样式定制方面，可以利用 CSS 或 SCSS 文件引入全局或局部样式规则。如果希望仅针对特定实例应用特殊样式，则可以在模板内通过类名控制：

<template>
  <div class="custom-editor">
    <Editor :init="editorConfig"/>
  </div>
</template>

<style scoped lang="scss">
.custom-editor .tox-tinymce{
  border-radius:8px;
}
/* 更多个性化样式 */
</style>

此外，还可以修改主题颜色等更深层次的设计元素，这通常涉及到覆盖默认的主题文件或是编写额外的 LESS/SASS 变量重写逻辑[^1]。