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

文本编辑器实现–wangeditor

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

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

defineOptions({
  name: "BaseEditor"
});

const mode = "default";
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();

// 内容 HTML
const valueHtml = ref("<p&gt;你好</p&gt;");

// 模拟 ajax 异步获取内容
onMounted(() =&gt; {

});

const editorConfig = { placeholder: "请输入内容..." };

const handleCreated = editor =&gt; {
  // 记录 editor 实例，重要！
  editorRef.value = editor;
};

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() =&gt; {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});

    <div class="wangeditor"&gt;
      <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>

回显

<p v-html="valueHtml"></p>
v-html绑定编辑器的数据

代码007普通

打赏 收藏 海报 链接