阅读量:0
一、效果
二、安装依赖
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()); } } }
