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