wangeditor vue3

### 如何在 Vue3 中使用 WangEditor 密集教程 #### 集成步骤说明 为了在 Vue 3 中成功集成 WangEditor 并实现其功能，以下是详细的实现方式： 1. **安装依赖** 使用 npm 或 yarn 安装 `wangeditor` 库。可以通过以下命令完成安装： ```bash npm install wangeditor ``` 2. **模板结构定义** 在 Vue 组件的 `<template>` 部分创建一个容器用于承载编辑器，并提供按钮触发保存事件。 ```html <template> <div> <!-- 编辑器容器 --> <div ref="editorContainer"></div> <!-- 提交按钮 --> <button @click="saveContent">保存</button> </div> </template> ``` 3. **脚本部分编写** 在 `<script>` 部分引入必要的模块并初始化编辑器实例。 - 使用 `ref` 获取 DOM 节点。 - 利用 `onMounted` 生命周期钩子，在组件挂载完成后初始化编辑器。 - 添加销毁逻辑以避免内存泄漏。 下面是一个完整的示例代码片段[^2]: ```javascript <script> import { ref, onMounted, onBeforeUnmount } from 'vue'; import WangEditor from 'wangeditor'; export default { setup() { const editorContainer = ref(null); let editorInstance; // 初始化编辑器 onMounted(() => { editorInstance = new WangEditor(editorContainer.value); // 自定义配置项 (可选) editorInstance.config.placeholder = '请输入内容...'; editorInstance.config.height = 300; // 创建编辑器 editorInstance.create(); }); // 销毁编辑器以防内存泄漏 onBeforeUnmount(() => { if (editorInstance && editorInstance.destroy) { editorInstance.destroy(); } }); // 保存内容函数 const saveContent = () => { const content = editorInstance.txt.html(); // 获取 HTML 内容 console.log('当前编辑器的内容:', content); // 可在此处执行进一步的操作，比如发送到服务器 }; return { editorContainer, saveContent, }; }, }; </script> ``` 4. **样式调整** 如果需要自定义样式，可以在 CSS 文件中设置全局样式或通过 scoped 样式限定作用域。 5. **双向绑定支持** 若希望实现类似于 `v-model` 的数据同步机制，则需额外封装一层逻辑。下面是一种简单的实现方案[^3]： ```html <template> <div class="app-container"> <Editor v-model="value" style="height: 600px" /> </div> </template> <script setup lang="ts"> import { ref } from 'vue'; import Editor from './components/wangEditor/index.vue'; const value = ref('<p>初始内容</p>'); </script> ``` --- #### 注意事项 - 确保在组件卸载前调用 `destroy()` 方法释放资源，从而避免潜在的内存泄露问题[^1]。 - 对于复杂的场景（如动态加载），可能还需要考虑异步加载策略或其他优化手段。 ---

### 集成 Wangeditor 到 Vue3 项目 为了在 Vue3 中集成 `wangeditor` 并实现图片上传功能，需先安装必要的依赖包。通过 npm 或 yarn 安装 `@wangeditor/editor` 和 `@wangeditor/editor-for-vue`： ```bash npm install @wangeditor/editor @wangeditor/editor-for-vue ``` 创建组件并引入编辑器，在 `<template>` 中定义编辑区域，并设置样式以确保其显示正常[^1]。 ```vue <template> <div style="border: 1px solid #ccc; width: 80%; margin: auto;"> <!-- 编辑器 --> <editor v-model="valueHtml" :on-change="handleChange" /> </div> </template> <script setup> import { ref } from 'vue'; import '@wangeditor/editor/dist/css/style.css'; // 引入 css import { Editor, Toolbar } from '@wangeditor/editor-for-vue'; const valueHtml = ref('<p>欢迎使用 wangeditor!</p>'); function handleChange(editor) { console.log('html', editor.getHtml()); } </script> <style scoped> /* 自定义样式 */ .editor { line-height: normal !important; } .w-e-text-container { height: 240px !important; } </style> ``` 配置自定义上传接口来处理图片上传逻辑。这通常涉及向服务器发送请求并将返回的结果作为图片链接插入到文档中[^2]。 ```javascript // 假设这是你的上传函数 async function uploadImage(file) { const formData = new FormData(); formData.append('file', file); try { let res = await fetch('/api/upload-image', { method: 'POST', body: formData, }); let result = await res.json(); if (res.ok && result.url) { return result.url; // 返回文件地址 } throw new Error('Upload failed'); } catch (error) { console.error(error); alert('Failed to upload image.'); } } ``` 注册插件以便能够调用上述方法完成图片上传操作。注意这里假设已经有一个可用的服务端API用于接收文件流数据[^3]。 ```javascript import createUploadPlugin from '@wangeditor/plugin-upload/lib/index.js'; export default defineComponent({ components: { Editor }, setup() { const editorRef = shallowRef(null); // 存储 editor 实例 onMounted(() => { const { domEditor } = editorRef.value; // 注册上传图片的菜单按钮 domEditor.config.MENU_CONF['uploadImage'] = { async customUpload(resultFiles, insertFn) { for (let i = 0; i < resultFiles.length; ++i) { let url = await uploadImage(resultFiles[i]); insertFn(url, '', ''); // 插入图片回调 } }, }; domEditor.create(); // 创建富文本实例 }); return { editorRef, }; }, }); ```