富文本编辑器的实现与回显

文本编辑器实现-wangeditor

写之前记得安装wangeditor插件，到时候报错别赖我

import “@wangeditor/editor/dist/css/style.css”;
import { Editor, Toolbar } from “@wangeditor/editor-for-vue”;

defineOptions({name: "BaseEditor"});const mode = "default";// 编辑器实例，必须用 shallowRefconst editorRef = shallowRef();// 内容 HTMLconst valueHtml = ref("
你好
");// 模拟 ajax 异步获取内容onMounted(() => {});const editorConfig = { placeholder: "请输入内容..." };const handleCreated = editor => {// 记录 editor 实例，重要！editorRef.value = editor;};// 组件销毁时，也及时销毁编辑器onBeforeUnmount(() => {const editor = editorRef.value;if (editor == null) return;editor.destroy();});

<div class="wangeditor"><Toolbar :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" style="border-bottom: 1px solid #ccc" /><Editor v-model="valueHtml" :defaultConfig="editorConfig" :mode="mode" style="height: 300px; overflow-y: hidden"@onCreated="handleCreated" /></div>

回显

v-html绑定编辑器的数据