vue3 + element plus 富文本编辑器

Vue3 + Element Plus 中可以使用官方推荐的 Wangeditor 或者 Quill 等成熟的富文本编辑器库来实现在项目中添加富文本编辑功能。Element Plus 提供了丰富的组件支持，配合这些编辑器插件可以使内容编辑更直观、易用。

Wangeditor是一个轻量级的富文本编辑器，它基于百度的 ECharts 和 Ace Editor 开发，具有良好的性能和定制性。在 Vue3 中，你可以通过安装 `@wangeditor/editor` 包并将其引入到组件中，然后像操作其他Element Plus组件一样使用它。

Quill 是另一个广泛使用的富文本编辑器，它支持Markdown语法，并提供了一个友好的API。在Vue3中，可以借助`quill-editor`这个包装的Vue插件来进行集成。

使用步骤通常包括：
1. 安装所需库：`npm install wangeditor quill-element-plus`
2. 在组件模板上渲染编辑器组件
3. 配置初始化选项（如主题、语言等）
4. 绑定事件监听器，如内容更改、保存等

<template>
  <el-button @click="openEditor">打开编辑器</button>
  <div v-if="editorVisible">
    <wangeditor :value="content" @change="handleContentChange"></wangeditor>
  </div>
</template>

<script>
import { ref } from 'vue';
import Wangeditor from '@wangeditor/editor';

export default {
  setup() {
    const editorVisible = ref(false);
    const content = ref('');

    // 初始化编辑器实例
    const initEditor = async () => {
      const editor = await Wangeditor.create({
        el: document.createElement('div'), // 使用一个div作为编辑区域
        initialValue: content.value,
        events: {
          change: (html) => content.value = html,
        },
      });
      this.editor = editor;
    };

    // 显示/隐藏编辑器
    const openEditor = () => {
      editorVisible.value = true;
      if (!this.editor) {
        initEditor();
      }
    };
    
    return {
      editorVisible,
      openEditor,
      handleContentChange: (html) => {/* 内容变化处理 */}
    };
  },
};
</script>