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

一、效果

二、安装依赖

复制代码
npm install wangeditor --save
npm install @wangeditor/editor-for-vue@next --save

三、使用

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

javascript 复制代码
<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的组件中编写如下信息:

javascript 复制代码
<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文件
javascript 复制代码
// 图片上传
export const uploadImg = (formData) => {
  return request.post("/upload/img", formData, {
    headers: {
      "Content-Type": "multipart/form-data"
    },
  });
};

需要自己编写后端代码,参考:

  • 控制层:
javascript 复制代码
//    上传图片
    @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
javascript 复制代码
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());
        }
    }
}
相关推荐
木头没有瓜8 分钟前
vscode离线安装插件
ide·vue.js·vscode
高兴达36 分钟前
Spring boot入门工程
java·spring boot·后端
伍哥的传说1 小时前
鸿蒙系统(HarmonyOS)应用开发之手势锁屏密码锁(PatternLock)
前端·华为·前端框架·harmonyos·鸿蒙
yugi9878381 小时前
前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
前端
幽络源小助理1 小时前
SpringBoot基于JavaWeb的城乡居民基本医疗信息管理系统
java·spring boot·学习
浪裡遊1 小时前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
旧曲重听12 小时前
最快实现的前端灰度方案
前端·程序人生·状态模式
默默coding的程序猿2 小时前
3.前端和后端参数不一致,后端接不到数据的解决方案
java·前端·spring·ssm·springboot·idea·springcloud
夏梦春蝉2 小时前
ES6从入门到精通:常用知识点
前端·javascript·es6
归于尽2 小时前
useEffect玩转React Hooks生命周期
前端·react.js