1.简介
开源 Web 富文本编辑器，开箱即用，配置简单。一个产品的价值，就在于解决用户的问题，提高效率、降低成本、增加稳定性和扩展性。wangEditor 不是为了做而做，也不是单纯的模仿谁，而是经过上述问题分析之后，给出一个系统的解决方案。旨在真正去解决用户的问题，产出自己的价值。更多资料见官网地址：https://www.wangeditor.com/。
2.安装
安装 editor
yarn add @wangeditor/editor # 或者 npm install @wangeditor/editor --save
安装 React 组件（可选）
yarn add @wangeditor/editor-for-react # 或者 npm install @wangeditor/editor-for-react --save
安装 Vue2 组件（可选）
yarn add @wangeditor/editor-for-vue # 或者 npm install @wangeditor/editor-for-vue --save
安装 Vue3 组件（可选）
yarn add @wangeditor/editor-for-vue@next # 或者 npm install @wangeditor/editor-for-vue@next --save
CDN
<!-- 引入 css -->
<link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">
<!-- 引入 js -->
<script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
<script>
var E = window.wangEditor; // 全局变量
</script>
3.封装代码
./index.vue
1 <template>
2 <div class="v-rich-text">
3 <div v-if="isSplitTool" :id="toolId" class="toolbar-container"></div>
4 <div v-if="isSplitTool" :id="textId" class="text-container"></div>
5 <div v-if="!isSplitTool" :id="textId"></div>
6 </div>
7 </template>
8
9 <script lang="ts">
10 import { onMounted, onBeforeUnmount, ref, toRefs, watch } from "vue";
11 import WangEditor from "wangeditor";
12 import { basicProps } from "./props";
13
14 export default {
15 name: "VRichText",
16 props: basicProps,
17 emits: ["change", "update:content"],
18 setup(props, { emit }) {
19 const { toolId, textId, content, isSplitTool } = toRefs(props);
20 let instance: any;
21 const textContent = ref(content.value);
22
23 watch(
24 () => props.content,
25 (nv) => {
26 if (nv !== instance.txt.html()) {
27 instance.txt.html(nv);
28 textContent.value = nv;
29 }
30 }
31 );
32
33 onMounted(() => {
34 if (isSplitTool.value) {
35 instance = new WangEditor("#" + toolId.value, "#" + textId.value);
36 } else {
37 instance = new WangEditor("#" + textId.value);
38 }
39 Object.assign(instance.config, {
40 uploadImgShowBase64: true,
41 showFullScreen: false,
42 zIndex: 100,
43 focus: false,
44 onchange() {
45 emit("update:content", instance.txt.html());
46 emit("change", instance.txt.html());
47 },
48
49 onBeforeUnmount(() => {
50 instance.destroy();
51 instance = null;
52 });
53
54 return {
55 toolId,
56 textId,
57 textContent,
58 isSplitTool,
59 };
60 },
61 };
62 </script>
63
64 <style lang="scss" scoped>
65 .v-rich-text {
66 height: 100%;
67 display: flex;
68 flex-direction: column;
69
70 .text-container {
71 flex: 1;
72 height: 0;
73 }
74 }
75 </style>
76
./props.ts
1 export const basicProps = {
2 // 工具栏ID
3 toolId: {
4 type: String,
5 default: "toolbar-container",
6 },
7 // 内容ID
8 textId: {
9 type: String,
10 default: "text-container",
11 },
12 // 富文本内容
13 content: String,
14 // 是否拆分tool栏
15 isSplitTool: {
16 type: Boolean,
17 default: true,
18 },
19 };
4.组件展示
标签：Vue,封装,wangeditor,content,instance,editor,props,组件 From： https://www.cnblogs.com/bk-ajiang/p/18103999