Question

在实际应用中，常常需要使用富文本编辑器来编辑一些比较复杂的内容，例如在实例中，对商品内容的描述可能既有文字说明，又有图片展示。在富文本编辑器中上传图片，具体取决于编辑器本身的设计。当然，一般富文本编辑器的设计都有一些可供配置的选项，例如，Ueditor 就是一个完全开源的可以定制的富文本编辑器。

7.4.1 使用富文本编辑器

使用 Ueditor 的页面，必须加入一些 JS 的引用和配置。因为在商品新建和编辑页面中都需要使用 Ueditor，所以都必须加入对它的引用，如代码清单 7-12 所示。

代码清单 7-12 使用 ueditor 的引用

<script type="text/javascript" charset="utf-8">
        window.UEDITOR_HOME_URL = "/ueditor/";
    </script>
    <script type="text/javascript" charset="utf-8" th:src="@{/ueditor/editor_
config.js}"></script>
    <script type="text/javascript" charset="utf-8" th:src="@{/ueditor/editor
_all.js}"></script>

然后在 Ueditor 的配置文件 editor_config.js 中修改上传图片的提交地址、路径等参数，将提交地址指向编写的控制器提供的链接地址，代码如下：

,imageUrl:"/pic/uploadimg"     // 图片上传提交地址





,imagePath:""                  // 图片修正地址





,imageFieldName:"upfile"       // 图片数据的




key,需要在后台修改对应文件的对应参数

7.4.2 实现文件上传

代码清单 7-13 是实现使用富文本编辑器的文件上传的控制器设计。这个控制器的设计与代码清单 7-11 控制器的设计差不多，只是返回的参数略有不同，以适合调用者——Ueditor 的使用，其中返回参数中的 url 就是一个完整的图片路径。

代码清单 7-13 Ueditor 图片上传控制器设计

    // ueditor 图片上传





@RequestMapping(value = "/uploadimg", method=RequestMethod.POST, produces=
"text/html;charset=UTF-8")
public void uploadimg(@RequestParam("upfile") MultipartFile upfile,Http
ServletRequest request,HttpServletResponse response){
    try {
        String filename = fastefsClient.uploFile(upfile);
        Long shopid = 1L;
        Map<String, Object> data = new HashMap<String, Object>();
        data.put("original", upfile.getOriginalFilename());
        data.put("url", pathHead+filename);
        data.put("title", "");
        data.put("state", "SUCCESS");
        ObjectMapper mapper = new ObjectMapper();
        String ret =  mapper.writeValueAsString(data);
        response.setContentType("text/html;charset=utf8");
        response.getOutputStream().write(ret.getBytes());
        response.flushBuffer();
    }catch (Exception e){
        e.printStackTrace();
    }
}

使用 Ueditor 上传图片的效果如图 7-3 所示。图片上传后，选择图片，单击富文本编辑器中的上传图片按钮，可以查看上传图片的简要信息。

图 7-3 使用富文本编辑器上传图片效果图