vue3集成wangEditor富文本编辑器

官网：https://www.wangeditor.com/

一、安装依赖

> yarn add @wangeditor/editor @wangeditor/editor-for-vue@next

二、项目中使用

<script setup lang="ts">
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import "@wangeditor/editor/dist/css/style.css";
// 富文本编辑器
const editorRef = shallowRef();
const editorHtml = ref("<p>Hello world</p>");
const toolbarConfig = {
 // excludeKeys: ["uploadImage", "uploadVideo", "insertImage", "insertVideo"],
 toolbarKeys: [
   "undo",
   "redo",
   "headerSelect",
   "fontSize",
   "fontFamily",
   "bold",
   "underline",
   "italic",
   "through",
   "code",
   "sub",
   "sup",
   "clearStyle",
   "color",
   "bgColor",
   "indent",
   "delIndent",
   // {
   //   "key": "group-justify",
   //   "title": "对齐",
   //   "iconSvg":
   //     '<svg viewBox="0 0 1024 1024"><path d="M768 793.6v102.4H51.2v-102.4h716.8z m204.8-230.4v102.4H51.2v-102.4h921.6z m-204.8-230.4v102.4H51.2v-102.4h716.8zM972.8 102.4v102.4H51.2V102.4h921.6z"></path></svg>',
   //   "menuKeys": [
   //     "justifyLeft",
   //     "justifyRight",
   //     "justifyCenter",
   //     "justifyJustify",
   //   ],
   // },
   "justifyLeft",
   "justifyRight",
   "justifyCenter",
   "justifyJustify",
   "lineHeight",
   "divider",
   "emotion",
   "insertLink",
   "codeBlock",
   "blockquote",
   "todo",
   "fullScreen",
   "bulletedList",
   "numberedList",
   "insertTable",
   "deleteTable",
   "insertTableRow",
   "deleteTableRow",
   "insertTableCol",
   "deleteTableCol",
   "tableHeader",
   "tableFullWidth",
 ],
};
const editorConfig = {
 placeholder: "请输入内容...",
};
const handleCreated = (editor) => {
 editorRef.value = editor;
};
onBeforeUnmount(() => {
 const editor = editorRef.value;
 if (editor == null) return;
 editor.destroy();
});
</script>
<template>
<div class="wang-editor">
 <Toolbar
   style="border-bottom: 1px solid #ccc"
   :editor="editorRef"
   :defaultConfig="toolbarConfig"
   mode="default"
 />
 <Editor
   style="height: 500px; overflow-y: hidden"
   v-model="editorHtml"
   :defaultConfig="editorConfig"
   mode="default"
   @onCreated="handleCreated"
 />
</div>
</template>    

如果需要HTML编解码可以下载依赖：npm install he -S，通过 he.encode("xxx") 编码、he.decode("xxx") 解码。