wangEditor富文本编辑的使用（上传视频上传图片）

93 阅读 0 评论 62 点赞

我是靠谱客的博主等待烧鹅，最近开发中收集的这篇文章主要介绍wangEditor富文本编辑的使用（上传视频上传图片），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

我认为比较重要的是上传图片跟上传视频比较重要

<template>
  <div id="demo1" class="width1"></div>
</template>

<script>
import wangEditor from "wangeditor";
export default {
  props: ["details2", "disabled"],
  data() {
    return {
      // 富文本
      editor: null,
    };
  },
  mounted() {
    // tinymce.init({});
    const editor = new wangEditor(`#demo1`);
    editor.config.height = 300;
    editor.config.debug = true;
    // 不需要的菜单栏
    editor.config.excludeMenus = ["table"];

    editor.config.pasteIgnoreImg = true;
    editor.config.uploadImgShowBase64 = true;
    editor.config.uploadFileName = "file";
    editor.config.uploadImgHeaders = {
      "Access-Control-Allow-Origin": "*", //解决cors头问题http://localhost:8083
      "Access-Control-Allow-Headers": "X-Requested-With",
      "Access-Control-Allow-Methods": "PUT,POST,GET,DELETE,OPTIONS",
      "Access-Control-Allow-Credentials": "true", //解决session问题
      client: "pc",
      token: JSON.parse(localStorage.getItem("userInfo")).token,
    };
    editor.config.withCredentials = false;
    editor.config.uploadImgServer =
      process.env.VUE_APP_BASE_API + "/file/upload";
    // "http://192.168.10.31:8001/omp/goods/image";

    editor.config.uploadImgHooks = {
      before: function (xhr, editor, files) {
        // 验证图片大小
        const isLt = files[0].size / 1024 / 1024 < 5;
        if (!isLt) {
          this.$message.error("上传文件大小不能超过 5 MB!");
          return false;
        }
      },
      success: function (xhr, editor, result) {
        // 图片上传并返回结果，图片插入成功之后触发
        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
      },
      fail: function (xhr, editor, result) {
        // 图片上传并返回结果，但图片插入错误时触发
        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
      },
      error: function (xhr, editor) {
        // 图片上传出错时触发
        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
      },
      timeout: function (xhr, editor) {
        // 图片上传超时时触发
        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
      },

      // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
      // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
      customInsert: function (insertImg, result, editor) {
        //         // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
        //         // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果

        //         // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
        insertImg(result.data.path);
        // console.log(result);
        // editor.command(null, 'insertHtml', html);
      },
    };

    //上传视频的地址
    editor.config.uploadVideoServer =
      process.env.VUE_APP_BASE_API + "/file/upload";

    editor.config.uploadVideoName = "file"; //视频上传的名字
    editor.config.uploadVideoHeaders = {
      "Access-Control-Allow-Origin": "*", //解决cors头问题http://localhost:8083
      "Access-Control-Allow-Headers": "X-Requested-With",
      "Access-Control-Allow-Methods": "PUT,POST,GET,DELETE,OPTIONS",
      "Access-Control-Allow-Credentials": "true", //解决session问题
      client: "ve",
      token: JSON.parse(localStorage.getItem("userInfo")).token,
    };
    editor.config.uploadVideoHooks = {
      // 上传视频之前
      /*        before: function(xhr) {
          console.log(xhr)
          // 可阻止视频上传
          return {
            prevent: true,
            msg: '需要提示给用户的错误信息'
          }
        },*/
      // 视频上传并返回了结果，视频插入已成功
      // 视频上传并返回了结果，视频插入已成功
      success: function (xhr) {
        console.log("success", xhr);
      },
      // 视频上传并返回了结果，但视频插入时出错了
      fail: function (xhr, editor, resData) {
        console.log("fail", resData);
      },
      // 上传视频出错，一般为 http 请求的错误
      error: function (xhr, editor, resData) {
        console.log("error", xhr, resData);
      },
      // 上传视频超时
      timeout: function (xhr) {
        console.log("timeout");
      },
      // 视频上传并返回了结果，想要自己把视频插入到编辑器中
      // 例如服务器端返回的不是 { errno: 0, data: { url : '.....'} } 这种格式，可使用 customInsert
      customInsert: function (insertVideoFn, result) {
        // result 即服务端返回的接口
        console.log("customInsert", result);
        // insertVideoFn 可把视频插入到编辑器，传入视频 src ，执行函数即可
        //result.data 就是url的值

        insertVideoFn(result.data.path);
      },
    };

    // 创建编辑器
    editor.create();
    this.editor = editor;
    this.editor.txt.html(this.details2);
    if (this.disabled) {
      this.editor.disable();
    } else {
      this.editor.enable();
    }
  },
  beforeDestroy() {
    // 调用销毁 API 对当前编辑器实例进行销毁
    // this.editor.destroy();
    this.editor = null;
  },
  watch: {
    // details2: {
    //   immediate: true,
    //   handler(val) {
    //     console.log(val, 5555544444);
    //     // 回显
    //     this.editor.txt.html(val);
    //   },
    // },
    details2(val) {
      // 回显
      this.editor.txt.html(val);
    },
    disabled() {
      if (this.disabled) {
        this.editor.disable();
      } else {
        this.editor.enable();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
::deep #demo1 {
  height: 400px;
  z-index: 0 !important;
}
</style>