tinymce富文本编辑器vue3如何使用

可以通过以下步骤在 Vue 3 中使用 TinyMCE 富文本编辑器：

1. 安装 TinyMCE

可以通过 npm 安装 TinyMCE：

npm install tinymce

2. 在 Vue 组件中引入 TinyMCE

可以在 Vue 组件中通过 import 引入 TinyMCE：

import tinymce from 'tinymce/tinymce';
import 'tinymce/themes/silver/theme';

3. 创建 TinyMCE 实例

在 Vue 组件的 mounted 钩子函数中，可以创建 TinyMCE 实例：

mounted() {
  tinymce.init({
    selector: '#mytextarea',
    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',
    menubar: 'file edit view insert format tools table help',
    toolbar_mode: 'floating',
    tinycomments_mode: 'embedded',
    tinycomments_author: 'Author name',
  });
}

这里的 `selector` 是指要将 TinyMCE 绑定到哪个文本域，其他的参数可以根据需要进行配置。

4. 销毁 TinyMCE 实例

在 Vue 组件的 beforeUnmount 钩子函数中，可以销毁 TinyMCE 实例：

beforeUnmount() {
  tinymce.remove('#mytextarea');
}

这样就可以在 Vue 3 中使用 TinyMCE 富文本编辑器了。