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());
        }
    }
}
相关推荐
莫的感情4 分钟前
下载按钮点击一次却下载两个文件问题
前端
一个很帅的帅哥8 分钟前
JavaScript事件循环
开发语言·前端·javascript
摇滚侠8 分钟前
Spring Boot 3零基础教程,WEB 开发 自定义静态资源目录 笔记31
spring boot·笔记·后端·spring
摇滚侠9 分钟前
Spring Boot 3零基础教程,WEB 开发 Thymeleaf 遍历 笔记40
spring boot·笔记·thymeleaf
小宁爱Python12 分钟前
Django Web 开发系列(二):视图进阶、快捷函数与请求响应处理
前端·django·sqlite
fox_13 分钟前
深入理解React中的不可变性:原理、价值与实践
前端·react.js
武天14 分钟前
Vue项目中有封装过axios吗?怎么封装的?
vue.js
Github项目推荐14 分钟前
你的错误处理一团糟-是时候修复它了-🛠️
前端·后端
Code小翊20 分钟前
C语言bsearch的使用
java·c语言·前端
云枫晖20 分钟前
Webapck系列-初识Webpack
前端·javascript