wangEditor 富文本编辑器图片上传

原创已于 2022-11-02 16:02:01 修改 · 820 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2022-11-02 15:59:44 首次发布

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

2 篇文章

订阅专栏

本文介绍如何在Vue项目中集成wangEditor富文本编辑器，包括安装、配置及自定义上传实现。

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

1.第一步通过yarn或者npm安装

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

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

2.在vue文件里面可以加入模版代码

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

3.引入所需要的链接

import { onBeforeUnmount, ref, shallowRef, onMounted, watch } from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";

4.直接放入所需要的代码

const toolbarConfig = {
  excludeKeys: ["group-video"], //排除不需要的上传视频
};
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();

// 内容 HTML
const valueHtml = ref("");

// 标题
const input1 = ref("");

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

const editorConfig = { placeholder: "请输入内容...", MENU_CONF: {} };

editorConfig.MENU_CONF["uploadImage"] = {
  server: "xxxx", // 服务端地址 写自己项目所上传的地址
  meta: {
     id:xxx,//加入上传时所需要的额外参数
  },
  // form-data fieldName ，默认值 'wangeditor-uploaded-image'
  fieldName: "materialFile",
  // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
  allowedFileTypes: ["image/*"],

  // 单个文件的最大体积限制，默认为 2M
  maxFileSize: 10 * 1024 * 1024, // 1M

  headers: {
        //加入不一样的参数
       },
  // 跨域是否传递 cookie ，默认为 false
  withCredentials: true, // 超时时间，默认为 10 秒
  timeout: 5 * 1000, // 5 秒 // 上传之前触发
  onBeforeUpload(file) {
    // file 选中的文件，格式如 { key: file }
    return file; // 可以 return        // 1. return file 或者 new 一个 file ，接下来将上传        // 2. return false ，不上传这个 file
  },
  customUpload(file, insertFn) {
    let index = file.name.lastIndexOf(".");
    let extension = file.name.substr(index + 1);
    let extensionList = [
      "png",
      "PNG",
      "jpg",
      "JPG",
      "jpeg",
      "JPEG",
      "bmp",
      "BMP",
    ];
    const isLt2M = file.size / 1024 / 1024 < 10;
    if (!isLt2M) {
      ElMessage.error("图片大小请不要超过10MB!");
      return false;
    } else if (extensionList.indexOf(extension) < 0) {
      ElMessage.error("当前文件格式不支持!");
      return false;
    } else {
      const obj = new FormData();
      //上传文件
      obj.append("file", file); // 这里可以修改默认的参数名字

      apiName(obj).then((res) => {
        if (res.errorNo == "0") {
          ElMessage.success("上传成功!");
          insertFn(res.responseData.url); //这里有三个参数，但是个人只需要第一个url
        }
      });
    }
    // insertFn(url, alt, href);
  },
};

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

const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};

const mode = ref("default");

这里的上传没用他自带的上传，根据项目所需要修改了部分。

有啥不好的望大佬指正