后台产品管理_富文本编辑器

在编写产品详情时，往往需要加入一些文字样式或者插入图片，这样最终给用户展示出来的效果会更好。

要想在插入内容时拥有样式，需要使用富文本编辑器。在项目中，我们使用中国人开发的一个富文本编辑器——wangEditor，官网地址：https://www.wangeditor.com/

1. 在前端页面中引入wangEditor.js

2. 在页面中加入wangEditor插件

   xxxxxxxxxx
   <div class="col-md-10 data" style="height: 350px">
       <div id="div1"></div>
       <textarea id="text1" style="width:100%; height:100px;" name="productDesc" hidden></textarea>
       <script>
           const E = window.wangEditor;
           const editor = new E('#div1');
           const $text1 = $('#text1');
           editor.customConfig.onchange = function (html) {
               // 第二步，监控变化，同步更新到 textarea
               $text1.val(html)
           }
           // 配置所有菜单
           editor.customConfig.menus = [
               'head',  // 标题
               'bold',  // 粗体
               'fontSize',  // 字号
               'fontName',  // 字体
               'italic',  // 斜体
               'underline',  // 下划线
               'foreColor',  // 文字颜色
               'backColor',  // 背景颜色
               'justify',  // 对齐方式
               'image',  // 插入图片
               'undo',  // 撤销
           ]
           // 配置服务器上传地址
           editor.customConfig.uploadImgServer = '/backstage/product/upload';
           // 配置上传图片的参数名
           editor.customConfig.uploadFileName = "file";
   
           editor.create();
           // 第一步，初始化 textarea 的值
           $text1.val(editor.txt.html());
       </script>
   </div>
   

3. 编写上传控制器，接收富文本编辑器上传的图片

   xxxxxxxxxx
   @RequestMapping(value = "/upload")
   @ResponseBody
   public WangEditorResult upload(HttpServletRequest request, MultipartFile file) throws Exception {
       // 创建文件夹，存放上传文件。
       //1.设置上传文件夹的真实路径
       String realPath = ResourceUtils.getURL("classpath:").getPath()+"/static/upload/";;
       //2.判断该文件夹是否存在，如果不存在，新建文件夹
       File dir = new File(realPath);
       if (!dir.exists()){
           dir.mkdirs();
       }
       // 拿到上传文件名
       String filename = file.getOriginalFilename();
       filename = UUID.randomUUID()+filename;
       // 创建空文件
       File newFile = new File(dir, filename);
       // 将上传的文件写到空文件中
       file.transferTo(newFile);
   
       WangEditorResult wangEditorResult = new WangEditorResult();
       String[] data = {"/upload/"+filename};
       wangEditorResult.setErrno(0);
       wangEditorResult.setData(data);
       return wangEditorResult;
   }
   

   wangEditor要求上传图片的返回值必须按照它的要求，所以我们创建一个实体类，用于返回上传的结果。

   xxxxxxxxxx
   @Data
   public class WangEditorResult {
       private int errno;
       private String[] data;
   }
   

4. 在yml中配置上传文件的大小

   xxxxxxxxxx
   # 上传文件
   spring:
     servlet:
       multipart:
         max-file-size: 10MB # 最大单个文件
         max-request-size: 10MB # 一次请求最大上传