wangeditor富文本编辑器的使用（vue）

官网
官方demo
参考

安装
yarn add @wangeditor/editor
yarn add @wangeditor/editor-for-vue

封装的富文本组件

<template>
  <div style="border: 1px solid #ccc">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor
      style="height: 40vh; overflow-y: hidden"
      v-model="valueHtml"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="handleCreated"
    />
  </div>
</template>
<script>
import "@wangeditor/editor/dist/css/style.css"; // 引入 css

import {
  onBeforeUnmount,
  watch,
  defineEmits,
  ref,
  shallowRef,
  onMounted,
} from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { message } from "ant-design-vue";
import netUrl from "@/views/miniprogram/uploadApi.js";
const token = ''
export default {
  components: { Editor, Toolbar },
  setup(props, { emit }) {
    // const emits = defineEmits(["onChange"]);
    // 编辑器实例，必须用 shallowRef
    const editorRef = shallowRef();

    // 内容 HTML
    const valueHtml = ref("");
    watch(
      () => valueHtml,
      (n) => {
        emit("onChangeValueHtml", n.value);
      },
      { deep: true, immediate: true }
    );

    // 模拟 ajax 异步获取内容
    onMounted(() => {
      // setTimeout(() => {
      //   valueHtml.value = "
模拟 Ajax 异步设置内容
";
      // }, 1500);
    });

    const toolbarConfig = {
      excludeKeys: [
        "fullScreen",
        "readOnly",
        "emotion",
        "code",
        "group-video",
        "undo", // 撤销
        "redo", // 重复
        "insertTable",
        "codeBlock",
      ],
    };
    const editorConfig = {
      placeholder: "请在这里输入内容...",
      MENU_CONF: {
        // 配置上传图片
        uploadImage: {
          // 请求路径
          server: `${netUrl}`,
          headers: { Authorization: token },
          // 后端接收的文件名称
          fieldName: "file",
          maxFileSize: 1 * 1024 * 1024, // 1M
          // 上传的图片类型
          allowedFileTypes: ["image/*"],
          // 小于该值就插入 base64 格式（而不上传），默认为 0
          base64LimitSize: 10 * 1024, // 10MB
          // 自定义插入返回格式【后端返回的格式】
          customInsert(res, insertFn) {
            if (res.code != 20000) {
              message.error("上传文件失败，" + res.message);
              return;
            }
            insertFn(res.data, res.data, res.data);
          },
          // 携带的数据
          meta: {
            imageSource: 1,
          },
          // 将 meta 拼接到 url 参数中，默认 false
          // 单个文件上传成功之后
          onSuccess(file, res) {
            if (res.code == 20000) {
              message.success(`${file.name} 上传成功`);
              return;
            } else {
              message.warning(`${file.name} 上传出了点异常`);
              return;
            }
          },
          // 单个文件上传失败
          onFailed(file, res) {
            console.log(res);
            message.error(`${file.name} 上传失败`);
          },
          // 上传错误，或者触发 timeout 超时
          onError(file, err, res) {
            console.log(err, res);
            message.error(`${file.name} 上传出错`);
          },
        },
      },
    };

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

    const handleCreated = (editor) => {
      editorRef.value = editor; // 记录 editor 实例，重要！
      // console.log(editor.getConfig(), "editor.getAllMenuKeys()");
    };

    return {
      editorRef,
      valueHtml,
      mode: "default", // 或 'simple'
      toolbarConfig,
      editorConfig,
      handleCreated,
    };
  },
};
</script>    
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144

工具栏修改

可以在官网提供的页面查看工具栏配置

更多配置详解

toolbar.getConfig()
1