vue2+wangEditor5 rich text editor (customized upload of pictures and videos to Qiniu Cloud/server)

1. Installation and use

Install

yarn add @wangeditor/editor
# 或者 npm install @wangeditor/editor --save
yarn add @wangeditor/editor-for-vue
# 或者 npm install @wangeditor/editor-for-vue --save

Introduce styles in main.js

import '@wangeditor/editor/dist/css/style.css'

Introduce js into the page using the editor

import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
components: { Editor, Toolbar },

template

<template>
  <div>
    <div style="border: 1px solid #ccc; margin-top: 10px">
      <!-- 工具栏 -->
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editor"
        :defaultConfig="toolbarConfig"
      />
      <!-- 编辑器 -->
      <Editor
        style="height: 400px; overflow-y: hidden"
        :defaultConfig="editorConfig"
        v-model="html"
        @onChange="onChange"
        @onCreated="onCreated"
      />
    </div>
  </div>
</template>

js

<script>
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
export default {
  name: "MyEditor",
  components: { Editor, Toolbar },
  data() {
    return {
      editor: null,
      html: "<p>hello&nbsp;world</p>",
      toolbarConfig: {},
      editorConfig: {
        placeholder: "请输入内容...",
        // 所有的菜单配置，都要在 MENU_CONF 属性下
        MENU_CONF: {},
      },
    };
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor); // 【注意】一定要用 Object.seal() 否则会报错
    },
    onChange(editor) {
      console.log("onChange", editor.getHtml()); // onChange 时获取编辑器最新内容
    },
  },
  mounted() {},
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁 editor ，重要！！！
  },
};
</script>

 At this point the editor can be displayed normally.

2. Upload pictures and videos

Uploading to the backend interface can be configured directly according to the document. The interface return format must also be consistent with the document.

 

 2) Customized upload (generally uploaded to other servers, here I uploaded to Qiniu Cloud Server)

Upload pictures and videos in data configuration

editorConfig: {
        placeholder: "请输入内容...",
        // 所有的菜单配置，都要在 MENU_CONF 属性下
        MENU_CONF: {
          uploadImage: {
            customUpload: async (file, insertFn) => {
              let resultUrl = await this.upqiniu(file, file.name);
              insertFn(resultUrl);
            },
          },
          uploadVideo: {
            customUpload: async (file, insertFn) => {
              let resultUrl = await this.upqiniu(file, file.name);
              insertFn(resultUrl);
            },
          },
        },
      },

 this.upqiniu is the code I wrote to upload the server. Finally, I just need to return the address returned by the interface.

 upqiniu(file, name) {
      return new Promise((resolve) => {
        let config = {
          useCdnDomain: true, //表示是否使用 cdn 加速域名，为布尔值，true 表示使用，默认为 false。
          region: null, // 根据具体提示修改上传地区,当为 null 或 undefined 时，自动分析上传域名区域
        };
        let putExtra = {
          fname: `upload_pic_${name}`, //文件原文件名
          params: {}, //用来放置自定义变量
          mimeType: null, //用来限制上传文件类型，为 null 时表示不对文件类型限制；限制类型放到数组里： ["image/png", "image/jpeg", "image/gif"]
        };
        var observable = qiniu.upload(
          file,
          `upload_pic_${name}`,
          this.token,
          putExtra,
          config
        );
        observable.subscribe({
          next: (result) => {
            // 主要用来展示进度
          },
          error: (errResult) => {
            // 失败报错信息
          },
          complete: (result) => {
            // 接收成功后返回的信息
            let url = "http://image.gewu.pro/" + result.key;
            resolve(url);
          },
        });
      });
    },