Vue中使用wangEditor富文本编辑器|图片上传（含后端代码）

一、效果

二、安装依赖

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

三、使用

在src下common文件夹下创建wangEditor文件夹，并在其文件夹下创建index.vue文件

<template>
  <div style="border: 1px solid #ccc; width: 100%">
    <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="handleCreated"
      @onChange="handleChange"
    />
  </div>
</template>
<script>
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { DomEditor } from "@wangeditor/editor";
export default {
  components: {
    Editor,
    Toolbar,
  },
  props: {
    value: {
      type: String,
      default: "",
    },
  },
  watch: {
    value(val) {
      setTimeout(() => {
        this.html = val;
      }, 1000);
    },
  },

  data() {
    return {
      editor: null,
      html: "",
      mode: "default",
      editorConfig: {
        placeholder: "请输入产品信息...",
        backColor: "red", // 背景颜色
        MENU_CONF: {
          uploadImage: {
            customUpload: this.uploaadImg,
          },
          uploadVideo: {
            customUpload: this.uploaadVideo,
          },
        },
      },
      toolbarConfig: {},
    };
  },
  methods: {
    handleCreated(editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
      //   设置工具栏详情
      this.toolbarConfig = {
        excludeKeys: [
          "insertVideo",
          "uploadVideo",
          "group-video",
          "fullScreen",
        ],
      };
    },
    handleChange(content) {
      const toolbar = DomEditor.getToolbar(content);
      //   查看工具栏列表toolbar.getConfig().toolbarKeys
      this.$emit("change", this.html);
    },
    uploaadImg(file, insertFn) {
      this.$emit("uploadImg", file, insertFn);
    },
    uploaadVideo(file, insertFn) {
      this.$emit("uploadVideo", file, insertFn);
    },
  },
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 销毁编辑器
  },
};
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>

在需要使用wangEditor的组件中编写如下信息：

<template>
     <WangEditor
       v-model="ruleForm.reproduceStep"
       @change="richTextChangeData"
       @uploadImg="richTextUploadImg"
     ></WangEditor>
</template>


<script>
import {
  uploadImg,
} from "@/apis/uploadImg";
import wangEditor from "@/components/wangEditor";

export default {
  name: "product",
  components: { wangEditor },
  data() {
    return {
      ruleForm: {
        reproduceStep: "",
      },
    };
  },

  methods: {
    richTextChangeData(val) {
      // 获取最新的html数据
      this.form.productIntroduction = val;
    },
    setFormData() {
      this.ruleForm.reproduceStep = "<h1>h1</h1>";
    },

    async richTextUploadImg(file, insertFn) {
      // 处理入参
      const formData = new FormData();
      formData.append("file", file);
      await uploadImg(formData).then((res) => {
        insertFn(res.data.data.imgUrl); // 页面插入图片
      });
    },
  },
};
</script>

创建文件上传API

• uploadImg.js文件

// 图片上传
export const uploadImg = (formData) => {
  return request.post("/upload/img", formData, {
    headers: {
      "Content-Type": "multipart/form-data"
    },
  });
};

需要自己编写后端代码，参考：

• 控制层：

//    上传图片
    @PostMapping("/uploadimg")
    public Result uploadImg(@RequestParam("file") MultipartFile file) throws IOException {
        String originalFilename = file.getOriginalFilename();//获取图片原始文件名
        int index = originalFilename.lastIndexOf(".");
        String extention = originalFilename.substring(index);//获得图片后缀名  .jpg
        String fileName =  UUID.randomUUID().toString() + extention; //进行拼接
        fileName = fileName.replace("-",""); //将文件路径中的-替换掉
        String uploadQiniu = QiniuUtils.uploadQiniu(file.getBytes(), fileName, "imgUpload/");
        return Result.success("上传图片成功",uploadQiniu);
    }

七牛云存储方法

• QiniuUtils.java

package xxx.xxx.xxx.utils;

import com.google.gson.Gson;
import com.qiniu.common.QiniuException;
import com.qiniu.common.Zone;
import com.qiniu.http.Response;
import com.qiniu.storage.BucketManager;
import com.qiniu.storage.Configuration;
import com.qiniu.storage.UploadManager;
import com.qiniu.storage.model.DefaultPutRet;
import com.qiniu.util.Auth;

public class QiniuUtils {

    //访问授权码
    public  static String accessKey = "";
    //秘密钥匙
    public  static String secretKey = "";
    //空间名称
    public  static String bucket = "";
    //外链域名
    public static String domain = "";


    //上传方式二：文件上传 通过上传文件的方式上传到存储空间
    public static String uploadQiniu(byte[] bytes, String fileName,String path){
        //构造一个带指定Zone对象的配置类
        Configuration cfg = new Configuration(Zone.zone0());
        //...其他参数参考类注释
        UploadManager uploadManager = new UploadManager(cfg);

        //默认不指定key的情况下，以文件内容的hash值作为文件名
        String key = path + fileName;
        Auth auth = Auth.create(accessKey, secretKey);
        String upToken = auth.uploadToken(bucket);
        try {
            Response response = uploadManager.put(bytes, key, upToken);
            //解析上传成功的结果
            DefaultPutRet putRet = new Gson().fromJson(response.bodyString(), DefaultPutRet.class);
            System.out.println(putRet.key);
            System.out.println(putRet.hash);
            //返回文件完整路径
            return domain+"/"+putRet.key;
        } catch (QiniuException ex) {
            Response r = ex.response;
            System.err.println(r.toString());
            try {
                System.err.println(r.bodyString());
                return "";
            } catch (QiniuException ex2) {
                //ignore
            }
        }
        return "";
    }


    //删除文件 参数：存储的图片文件名
    public static void deleteFileFromQiniu(String fileName,String path){
        //构造一个带指定Zone对象的配置类
        Configuration cfg = new Configuration(Zone.zone0());
        String key = path + fileName;
        Auth auth = Auth.create(accessKey, secretKey);
        BucketManager bucketManager = new BucketManager(auth, cfg);
        try {
            bucketManager.delete(bucket, key);
        } catch (QiniuException ex) {
            //如果遇到异常，说明删除失败
            System.err.println(ex.code());
            System.err.println(ex.response.toString());
        }
    }
}