一、效果

二、安装依赖

npm install wangeditor --save npm install @wangeditor/editor-for-vue@next --save

三、使用

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

在需要使用wangEditor的组件中编写如下信息：

创建文件上传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());         }     } }