vue3 富文本使用

在 Vue3 项目中集成富文本编辑器，可以使用多种工具库来实现，包括 `wangEditor`、`UEditor` 或 `vue-quill-editor`。以下以 `wangEditor` 和 `UEditor` 为例，提供详细的集成和使用说明。 ### 使用 wangEditor 1. **安装** 首先需要通过 npm 安装 `wangEditor`： ```bash npm install wangeditor --save ``` 2. **创建组件** 在项目的 `components` 文件夹下创建一个名为 `WangEditor.vue` 的组件文件，并编写如下代码： ```vue <template> <div ref="editor" style="text-align:left;"></div> </template> <script> import { onMounted, ref } from 'vue'; import E from 'wangeditor'; export default { name: 'WangEditor', props: ['value'], setup(props, { emit }) { const editor = ref(null); const value = props.value; onMounted(() => { const instance = new E(editor.value); instance.config.onchange = (newHtml) => { emit('update:value', newHtml); }; instance.create(); if (value) { instance.txt.html(value); } }); return { editor }; }, }; </script> ``` 3. **在页面中使用** 引入并注册该组件，在页面中使用它： ```vue <template> <div> <WangEditor v-model="content" /> <button @click="submitContent">提交内容</button> </div> </template> <script> import WangEditor from '@/components/WangEditor.vue'; export default { components: { WangEditor }, data() { return { content: '', }; }, methods: { submitContent() { console.log(this.content); }, }, }; </script> ``` ### 使用 UEditor 1. **准备资源** 下载百度 UEditor 资源包，并将其放入项目的 `public` 目录（如 `/public/ueditor`）[^2]。 2. **创建组件** 创建 `Ue.vue` 组件文件，并添加以下代码： ```vue <template> <div> <script id="container" name="content" type="text/plain"></script> </div> </template> <script> import { onMounted } from 'vue'; import * as UE from '@/assets/ueditor/ueditor.min.js'; // 根据实际路径调整 export default { name: 'Ue', props: ['value'], setup(props, { emit }) { let ue = null; onMounted(() => { ue = UE.getEditor('container'); if (props.value) { ue.ready(() => { ue.setContent(props.value); }); } ue.addListener('contentChange', () => { emit('update:value', ue.getContent()); }); }); return { ue }; }, }; </script> ``` 3. **在页面中引用** 在目标页面中引入并使用该组件： ```vue <template> <div> <Ue v-model="ueditorValue" /> <input type="button" value="显示编辑器内容（从控制台查看）" @click="returnContent" /> </div> </template> <script> import Ue from '@/components/Ue.vue'; export default { components: { Ue }, data() { return { ueditorValue: '编辑器默认文字', }; }, methods: { returnContent() { console.log(this.ueditorValue); }, }, }; </script> ``` ### 其他选项：vue-quill-editor 如果选择 `vue-quill-editor`，可以按如下步骤操作： 1. **安装依赖** ```bash npm install vue-quill-editor quill --save ``` 2. **全局或局部注册** 在 `main.js` 中进行全局注册： ```js import { createApp } from 'vue'; import App from './App.vue'; import VueQuillEditor from 'vue-quill-editor'; import 'quill/dist/quill.core.css'; import 'quill/dist/quill.snow.css'; import 'quill/dist/quill.bubble.css'; const app = createApp(App); app.use(VueQuillEditor); app.mount('#app'); ``` 3. **在页面中使用** ```vue <template> <div> <quill-editor v-model="content" /> <p>当前内容: {{ content }}</p> </div> </template> <script> export default { data() { return { content: '<h1>初始内容</h1>', }; }, }; </script> ``` ### 总结 以上方法展示了如何在 Vue3 项目中集成 `wangEditor`、`UEditor` 和 `vue-quill-editor` 等富文本编辑器。根据具体需求选择合适的编辑器，并按照文档进行配置即可满足大多数场景的需求。