vue中wangeditor使用教程

### 使用 Vue3 集成 WangEditor 的详细教程

#### 安装依赖包
为了在 Vue 项目中使用 WangEditor，首先需要安装 `@wangeditor/editor` 和 `@wangeditor/editor-for-vue` 这两个 npm 包。可以通过命令行执行如下指令完成安装：

npm install @wangeditor/editor @wangeditor/editor-for-vue

#### 引入并注册组件
接着，在目标 Vue 组件内引入所需的编辑器和工具栏组件，并将其作为局部组件进行注册。

import { defineComponent } from 'vue';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';

export default defineComponent({
    components: {
        Editor,
        Toolbar
    },
});

#### 初始化编辑器配置
创建一个方法用于初始化编辑器实例及其配置选项，比如设置高度、上传图片等功能。这一步骤对于自定义化编辑体验至关重要[^1]。

setup() {
    const editorConfig = reactive({
        placeholder: "请输入内容...",
        height: 500 // 设置编辑区的高度
    });

    return {
        editorConfig
    };
}

#### 处理表单提交事件
当用户点击保存按钮时触发此函数，该函数会读取当前编辑区域的内容并通过 API 发送至服务器端存储起来。注意要确保数据已被正确序列化为 HTML 字符串形式以便后续渲染[^2]。

<template>
    <!-- ... -->
    <button type="submit" @click.prevent="handleSubmit">Submit</button>
</template>

<script lang="ts">
methods: {
    handleSubmit(): void {
        console.log(this.editorContent); // 输出编辑后的HTML字符串
        // 可在此处编写发送请求逻辑...
    }
},
data(){
    return{
        editorContent:""
    }
}
</script>

#### 销毁编辑器实例以防内存泄露
最后一点也是非常重要的一点是在组件卸载之前调用 destroy 方法释放资源，从而避免潜在的性能问题或错误行为发生。

beforeDestroy() {
    this.$refs.myEditor.destroy();
}