vue3中使用富文本编辑器

在Vue 3中使用富文本编辑器，你可以选择一个流行的开源库，如Quill、TinyMCE或Vditor。以下是使用TinyMCE的一个基本示例：

1. 首先，安装TinyMCE：

npm install @tinymce/tinymce-vue
npm install tinymce

2. 然后，在你的组件中引入并使用tinymce-vue组件：

<template>
  <div>
    <editor v-model="content" :init="tinymceInit" />
  </div>
</template>
 
<script>
import { ref } from 'vue';
import Editor from '@tinymce/tinymce-vue';
import 'tinymce/models/dom/Sizzle';
import 'tinymce/models/Editor';
import 'tinymce/models/dom/DOMUtils';
import 'tinymce/plugins/image';
import 'tinymce/plugins/link';
import 'tinymce/plugins/media';
import 'tinymce/plugins/table';
import 'tinymce/plugins/lists';
import 'tinymce/plugins/contextmenu';
import 'tinymce/plugins/wordcount';
import 'tinymce/themes/silver';
 
export default {
  components: {
    Editor
  },
  setup() {
    const content = ref('');
 
    const tinymceInit = {
      skin: false,
      plugins: 'image link media table lists contextmenu wordcount',
      toolbar: 'undo redo | bold italic | alignleft aligncenter alignright alignjustify | image media | bullist numlist | link unlink | wordcount',
      menubar: 'file edit view insert format tools table help',
      height: 500
    };
 
    return {
      content,
      tinymceInit
    };
  }
};
</script>

在这个示例中，我们创建了一个Vue 3组件，其中包含了tinymce-vue编辑器组件。我们使用v-model来实现数据的双向绑定，并通过init选项来配置TinyMCE的初始化设置。

请注意，你需要根据自己的需求配置TinyMCE的插件和工具栏。上面的配置包括了基本的文本格式、图片、媒体、列表和链接工具，以及一些常用的编辑功能。