1、npm install @wangeditor/core @wangeditor/editor @wangeditor/editor-for-vue
2、封装组件 MyEditor.vue, （这里是通过props content 将展示内容传入）
<template><div><div style="border: 1px solid #ccc; margin-top: 10px"><!-- 工具栏 --><Toolbarstyle="border-bottom: 1px solid #ccc":editor="editor":defaultConfig="toolbarConfig"/><!-- 编辑器 --><Editorstyle="height: 400px; overflow-y: hidden":defaultConfig="editorConfig"v-model="html"@onChange="onChange"@onCreated="onCreated"/></div></div>
</template><script>
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { DomEditor } from '@wangeditor/editor'export default {name: "MyEditor",components: { Editor, Toolbar },props: {content: {type: String,default: '',},},data() {return {editor: null,html: "",toolbarConfig: {/* 显示哪些菜单，如何排序、分组 */ toolbarKeys: ['headerSelect', '|', 'bold', 'underline', 'italic', 'color', 'bgColor', '|', 'fontSize', 'fontFamily', 'lineHeight', '|', 'bulletedList', 'numberedList', 'todo', '|', 'emotion', 'insertLink', 'insertTable', 'codeBlock', 'divider', ], // excludeKeys: [ ], /* 隐藏哪些菜单 */ },editorConfig: {placeholder: "",// autoFocus: false,readOnly: true, // 只读、不可编辑// 所有的菜单配置，都要在 MENU_CONF 属性下MENU_CONF: {},},};},methods: {onCreated(editor) {this.editor = Object.seal(editor); // 【注意】一定要用 Object.seal() 否则会报错},onChange(editor) {// console.log("onChange", editor.getHtml() ); // onChange 时获取编辑器最新内容// const toolbar = DomEditor.getToolbar(editor)// console.log("工具栏配置", toolbar.getConfig().toolbarKeys ); // 工具栏配置},getEditorText() {const editor = this.editor;if (editor == null) return;// console.log(editor.getText()); // 执行 editor API},printEditorHtml() {const editor = this.editor;if (editor == null) return;// console.log(editor.getHtml()); // 执行 editor API},},mounted() {// 模拟 ajax 请求，异步渲染编辑器setTimeout(() => {this.html = this.content;}, 1500);},beforeDestroy() {const editor = this.editor;if (editor == null) return;editor.destroy(); // 组件销毁时，及时销毁 editor ，重要！！！},
};
</script><style src="@wangeditor/editor/dist/css/style.css"></style>
最后在用展示富文本的地方 引用组件就可以了
<My-editor :content='pbbg.gongShiContent'></My-editor>这里是直接参照的官方示例，示例地址：
vue2-wangEditor-demo - CodeSandboxvue2-wangEditor-demo by wangfupeng1988 using @wangeditor/core, @wangeditor/editor, @wangeditor/editor-for-vue, @wangeditor/plugin-formula, @wangeditor/plugin-mention, core-js, element-ui, katex, vuehttps://codesandbox.io/s/vue2-wangeditor-demo-1rwjms?file=/src/components/MyEditor.vue:0-2180git地址：https://github.com/wangfupeng1988/vue2-wangeditor-demo
官方文档：快速开始 | wangEditor
