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. 绑定事件监听器，如内容更改、保存等 ```vue <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> ```