WangEditor 安装和使用以及Oss图片视频上传和常见问题(针对Vue2 V5)

头发还在指定菜

已于 2022-11-17 09:44:28 修改

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏：富文本编辑器文章标签：前端前端框架 vue.js

于 2022-11-16 11:42:06 首次发布

本文链接：https://blog.csdn.net/qq_36770411/article/details/127880579

富文本编辑器专栏收录该内容

3 篇文章

订阅专栏

本文档详细介绍了如何在Vue2项目中安装和使用WangEditor5，包括基本安装、模版展示、全屏层级问题的解决，以及图片和视频的OSS上传配置。通过实例代码展示了编辑器的初始化、内容异步设置和组件销毁过程，同时提供了自定义上传策略以适应阿里云OSS存储。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

WangEditor v5 官方文档

安装 editor

npm install @wangeditor/editor --save

安装 Vue2 组件(可选)

npm install @wangeditor/editor-for-vue --save

模版

<template>
    <div style="border: 1px solid #ccc;">
        <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editor"
            :defaultConfig="toolbarConfig"
            :mode="mode"
        />
        <Editor
            style="height: 500px; overflow-y: hidden;"
            v-model="html"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="onCreated"
        />
    </div>
</template>

<script>
import Vue from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

export default Vue.extend({
    components: { Editor, Toolbar },
    data() {
        return {
            editor: null,
            html: '<p>hello</p>',
            toolbarConfig: { },
            editorConfig: { placeholder: '请输入内容...' },
            mode: 'default', // or 'simple'
        }
    },
    methods: {
        onCreated(editor) {
            this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
        },
    },
    mounted() {
        // 模拟 ajax 请求，异步渲染编辑器
        setTimeout(() => {
            this.html = '<p>模拟 Ajax 异步设置内容 HTML</p>'
        }, 1500)
    },
    beforeDestroy() {
        const editor = this.editor
        if (editor == null) return
        editor.destroy() // 组件销毁时，及时销毁编辑器
    }
})
</script>

记得引入 style (忘记加的话工具栏样式会有问题）

<style src="@wangeditor/editor/dist/css/style.css"></style>

或者

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

图片和视频上传（oss上传）

      editor: null,
      html: "<p>hello</p>",
      toolbarConfig: {},
      editorConfig: {
        placeholder: "请输入内容...",
        MENU_CONF: {
          uploadImage: {
            customUpload: this.uploadImg,
            // server: "https://yimiaoyouxi.oss-cn-qingdao.aliyuncs.com/",
            //自定义上-oss
            // this.editor.initSelection();
            customUpload: async (file, insertFn) => {
              const resultUrl = await ossUpload(file, file.name);
              // this.editor.initSelection();
              insertFn(resultUrl, "图片", resultUrl);
              // insertImg(resultUrl);
            },
            // 单个文件的最大体积限制，默认为 2M
            maxFileSize: 6 * 1024 * 1024, // 6M
            // 最多可上传几个文件，默认为 100
            maxNumberOfFiles: 100,
            // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
            allowedFileTypes: ["image/*"],
            // 自定义上传参数，例如传递验证的 token 等。
                参数会被添加到 formData 中，一起上传到服务端。
            meta: {
              // key: "xxx",
              // otherKey: "yyy"
            },
            // 将 meta 拼接到 url 参数中，默认 false
            metaWithUrl: false
            // 超时时间，默认为 10 秒
             timeout: 10 * 1000 // 5 秒
          },
          uploadVideo: {
            allowedFileTypes: ["video/*"],
            customUpload: async (file, insertFn) => {
              const resultUrl = await ossUpload(file, file.name);
              insertFn(resultUrl);
            }
          }
        }
      },
      mode: "default", // or 'simple'

import $http from '@/util/http.js'
const OSS = require("ali-oss");
const api = require('@/util/api.js')
//获取配置的方法
const getListData = async () => {
    let info = await $http.get(api.getOssConfig)
    return {
        accessKeyId:.info.accessid,
        accessKeySecret: info.accessKeySecret,
        stsToken: info.securityToken,
    }
};

//获取配置条件
const client = (data) => {
  return new OSS({
    region: "oss-cn-hangzhou",//这个根据自己项目去填写(地区)
    accessKeyId: data.accessKeyId,//
    accessKeySecret: data.accessKeySecret,
    stsToken: data.stsToken,
    bucket: "xxx", ,//这个根据自己项目去填写
  });
};
//获取uuid随机数作为文件名称
const getFileNameUUID = () => {
  function rx() {
    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
  }
  return `${+new Date()}_${rx()}${rx()}`;
};
//创建oss上传方法
async function ossUpload(file,module='image') {
  //调用接口，获取配置
    let configInfo = await getListData();
    let fileType = file.type.split("/")[1]
    //拼接文件名称（拼接你需要保存的目录路径,'avatar/'这是我的目录路径）
    var date = new Date();
    let fileNameUrl = `avatar/${await getFileNameUUID()}.${fileType}`;
    let res = await client(configInfo).put(fileNameUrl, file);
    return res.url;
}

export default ossUpload;

关于WangEditor全屏层级的问题

解决方案（修改文本编辑区域的z-index 堆叠层级）

  .w-e-full-screen-container {
    z-index: 1;
  }