Vue3组件中如何获取已存在的TinyMCE实例并获取纯文本

直接上代码：

<script setup>

// other codes

import { ref, defineExpose } from 'vue';

const editorContent = ref(''); // 用于绑定已经封装好的TinyMCE组件的model

const getPlainText = () => {
    const editor = window.tinymce.get(0); // 很关键！用于获取编辑器实例
    if (editor) {
        return editor.getContent({ format: 'text' });
    }
    return editorContent.value;
};

defineExpose({ editorContent, getPlainText });

// other codes
</script>

为了实现模块化设计和模块复用，我使用了 “TinyMce组件 - 子组件 -父组件”的模式，即进行两次封装。以上代码为子组件的script setup的部分代码。

从代码中可以看到，我并没有定义过tinymce实例，这是因为TinyMCE会自动添加实例：

1. 全局实例：@tinymce/tinymce-vue 组件库在初始化编辑器时，会将编辑器实例添加到 window.tinymce 对象中。这是 TinyMCE 的一个特性，它允许你通过索引号（如 0）来获取全局编辑器实例。

2. 索引号：当你调用 window.tinymce.get(0); 时，你实际上是在获取第一个初始化的 TinyMCE 编辑器实例。如果有多个编辑器实例，你可以通过不同的索引号来获取它们。

 然后获取纯文本部分的代码也比较简单，由于已经将编辑器存储在editor对象中，所以使用editor.getContent({ format: 'text' })即可获取不带html标签的纯文本内容（否则，如果在父组件中直接访问editorContent，得到的结果将带有<p>等标签，不利于进行后端文本处理）。

额外说一下，这里我还用到了defineExpose方法，这样可以将子组件中声明的属性暴露给父组件，从而在父组件中使用getPlainText函数。