vue3富文本编辑器tinymce

Vue 3中有很多富文本编辑器的选择，其中一个常用的是TinyMCE。要在Vue 3中使用TinyMCE富文本编辑器，可以按照以下步骤进行：

1. 首先，使用npm或者yarn安装TinyMCE编辑器依赖包：

npm install tinymce

2. 在Vue组件中引入需要的TinyMCE编辑器资源文件。有多种方式可以引入，这里以CDN引入为例：

<script src="https://cdn.jsdelivr.net/npm/tinymce@5"></script>

3. 创建一个Vue组件，并在其中添加一个textarea元素作为编辑器容器：

<template>
  <div>
    <textarea id="my-editor"></textarea>
  </div>
</template>

4. 在Vue组件的`mounted`钩子函数中初始化TinyMCE编辑器，并指定其选项和回调函数：

<script>
import { onMounted } from 'vue';

export default {
  mounted() {
    onMounted(() => {
      tinymce.init({
        selector: '#my-editor',
        height: 500,
        plugins: 'advlist autolink lists link image charmap print preview anchor',
        toolbar: 'undo redo | formatselect | bold italic backcolor | \
                  alignleft aligncenter alignright alignjustify | \
                  bullist numlist outdent indent | removeformat | help',
        setup: (editor) => {
          editor.on('change', () => {
            this.$emit('input', editor.getContent());
          });
        },
      });
    });
  },
};
</script>

这里的选项和回调函数可以根据实际需要进行配置，你可以根据TinyMCE的文档来设置更多的选项。

5. 最后，在使用该组件的父组件中，可以通过`v-model`来双向绑定富文本编辑器的内容：

<template>
  <div>
    <RichTextEditor v-model="content" />
    <div>
      <h3>输出的内容：</h3>
      <div v-html="content"></div>
    </div>
  </div>
</template>

<script>
import RichTextEditor from './RichTextEditor.vue';

export default {
  components: {
    RichTextEditor,
  },
  data() {
    return {
      content: '',
    };
  },
};
</script>

这样，就可以在Vue 3中使用TinyMCE富文本编辑器了。希望对你有所帮助！