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%"><Toolbarstyle="border-bottom: 1px solid #ccc":editor="editor":defaultConfig="toolbarConfig":mode="mode"/><Editorstyle="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().toolbarKeysthis.$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><WangEditorv-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);//获得图片后缀名  .jpgString 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());}}
}