ant-design-vue 和 tinyMCE混合使用

### 集成 ant-design-vue 和 TinyMCE 实现富文本编辑功能

为了成功集成 `ant-design-vue` 和 `TinyMCE` 来创建一个带有模态对话框的富文本编辑器，可以遵循以下方法：

#### 安装依赖库
首先，在项目中安装所需的 npm 包。这包括 `@tinymce/tinymce-vue` 组件以及 `ant-design-vue` UI 库。

npm install @tinymce/tinymce-vue ant-design-vue --save

#### 导入组件
接着，在 Vue 文件里导入这些模块，并注册它们作为局部或全局组件以便后续使用。

// main.js 或 setup.js 中配置全局组件
import { createApp } from 'vue';
import App from './App.vue';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css'; // 引入样式文件
import Editor from '@tinymce/tinymce-vue';

const app = createApp(App);
app.use(Antd).component('Editor', Editor);  // 注册 editor 组件
app.mount('#app');

对于特定页面上的应用，则可以在单个 `.vue` 文件内完成相同的操作：

<template>
  <!-- 使用 Modal 和 Editor -->
</template>

<script>
export default {
  name: "MyComponent",
  components: {
    AModal: () => import('ant-design-vue').then(m => m.Modal),
    Editor,
  },
};
</script>

#### 创建带富文本编辑器的模态窗口
现在来构建实际的内容部分——即包含 TinyMCE 编辑区域的弹窗。这里展示了一个简单的例子说明如何做到这一点。

<!-- MyComponent.vue -->
<template>
  <div id="my-component">
    <a-button type="primary" @click="visible=true">Open Text Editor</a-button>
    
    <a-modal :visible="visible" title="Rich Text Editing" okText="Save" cancelText="Cancel"
             @ok="handleOk()" @cancel="visible=false">
      <editor v-if="visible" v-model="richTextContent"></editor>
    </a-modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      richTextContent: ''
    };
  },
  methods: {
    handleOk() {
      console.log(this.richTextContent);
      this.visible = false;
    }
  }
}
</script>

上述代码片段展示了如何通过点击按钮触发显示隐藏状态 (`v-if`) 的 `<editor>` 标签实例，从而控制 TinyMCE 编辑区是否可见[^1]。当用户关闭模态框时，可以通过监听事件处理函数获取当前输入内容并执行相应操作。

需要注意的是，如果遇到第二次打开模态框后 TinyMCE 渲染异常的情况，可能是因为销毁机制不完善所致。此时建议尝试调整生命周期钩子逻辑或者查阅官方文档寻找解决方案[^4]。