当前位置：首页 > news >正文

vue3+wangEditor实现富文本编辑器

news 2025/8/30 9:28:28

1、这里介绍的是富文本编辑器的wangEditor，官网是：wangEditor

2、代码实例：

<template><!-- 创建一个富文本编辑器的盒子 --><div><!-- 工具栏组件 --><Toolbarstyle="border-bottom: 1px solid #ccc":editor="editorRef"<!-- 绑定编辑器实例 -->:defaultConfig="toolbarConfig"<!-- 工具栏配置 -->:mode="mode"<!-- 编辑器模式（默认 'default'） -->/><Editorstyle="height: 500px; overflow-y: hidden"v-model="valueHtml"<!-- 双向绑定编辑器的 HTML 内容 -->:defaultConfig="editorConfig"<!-- 编辑器配置（如占位符） -->:mode="mode"<!-- 模式（同工具栏） -->@onCreated="handleCreated"<!-- 编辑器创建完成时的回调 -->/></div>
</template><script setup>
// 引入 wangEditor 的 CSS 样式（必须）
import '@wangeditor/editor/dist/css/style.css'
import { onBeforeUnmount, ref, shallowRef } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
// // 编辑器实例（必须用 shallowRef 避免响应式代理导致问题）
const editorRef = shallowRef()
// 存储编辑器内容的 HTML（初始值为 '<p>hello</p>'）
const valueHtml = ref('<p>hello</p>')
// 工具栏配置（空对象表示使用默认配置）
const toolbarConfig = {}
// 编辑器配置（设置占位提示文字）
const editorConfig = { placeholder: '请输入内容...' }
// 组件销毁时，销毁编辑器实例（避免内存泄漏）
onBeforeUnmount(() => {const editor = editorRef.valueif (editor == null) returneditor.destroy()
})
// 编辑器创建完成时的回调函数
const handleCreated = (editor) => {editorRef.value = editor // 保存编辑器实例到 editorRef
}
</script><style lang="scss" scoped></style>

3、富文本编辑器内容失去响应式怎么操作？

双向同步：

编辑器 -> Vue: 通过配置 editorConfig.onChange 或在 handleCreated 中使用 editor.on('change', ...)，在回调中手动执行 valueHtml.value = editor.getHtml()。

<template><div style="border: 1px solid #ccc"><Toolbar :editor="editorRef" :defaultConfig="toolbarConfig" /><Editorstyle="height: 500px; overflow-y: hidden"v-model="valueHtml" <!-- 这里保留 v-model，用于初始化 -->:defaultConfig="editorConfig"@onCreated="handleCreated"/></div>
</template><script setup>
import { onBeforeUnmount, ref, shallowRef } from 'vue';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';const editorRef = shallowRef();
const valueHtml = ref('<p>hello</p>'); // 这个变量仍然是内容的“真相来源”// 配置编辑器，启用 onChange 回调
const editorConfig = {placeholder: '请输入内容...',// 关键：定义编辑器自身的 onChange 函数onChange: (editor) => {// 当编辑器内容变化时，这个函数会被触发console.log('onChange:', editor.getHtml());// 手动同步编辑器的内容到 Vue 响应式变量valueHtml.value = editor.getHtml();},
};const handleCreated = (editor) => {editorRef.value = editor;// 你也可以通过实例监听（与配置中的 onChange 二选一即可）// editor.on('change', () => {//   valueHtml.value = editor.getHtml();// });
};onBeforeUnmount(() => {const editor = editorRef.value;if (editor == null) return;editor.destroy();
});
</script>

Vue -> 编辑器: 通过 watch 监听 valueHtml，在回调中手动执行 editor.setHtml(newValue)，并添加防循环判断。

import { watch } from 'vue';// ... 其他代码同上 ...watch(valueHtml, (newVal, oldVal) => {// 防止循环更新：如果新内容和编辑器当前内容一致，则不再设置if (!editorRef.value) return;if (newVal === editorRef.value.getHtml()) return; // 使用编辑器 API 同步内容editorRef.value.setHtml(newVal);
});

3、效果图