Guns+wangEditor集成内置图片上传并存储为html标签数据结构

1.Editor内容区域

<div class="col-sm-11 b-r">
  <div class="form-group">
    <label class="col-sm-1 control-label" id="content">正文</label>
    <div class="col-sm-11">
      <div id="editor" class="editorHeight"></div>
    </div>
  </div>
</div>

2.引入官方js文件wangEditor.js

3.引入editor初始化js文件

/**
 * 初始化editor +
 * 处理修改编辑器异常
 * @param id 标签id(不含'#')
 * @param uploadFileName 上传文件名称
 * @param uploadImgServer 上传服务器地址
 * @param contentId  内容id(不含'#')
 * @returns {*}
 */
function initEditorConfig(id,uploadFileName,uploadImgServer,contentId) {
    //初始化编辑器
    var E = window.wangEditor;
    var editor = new E('#'+id);
    editor.customConfig.showLinkImg = false;
    editor.customConfig.uploadFileName = uploadFileName;
    editor.customConfig.uploadImgServer =uploadImgServer;
    editor.customConfig.uploadImgHooks = {
        customInsert: function (insertImg, result, editor) {
            var url =result.data;
            insertImg(url);
        }
    };
    var _val = $('#'+contentId).val();
    editor.create();
    editor.txt.html($("#content").val());
    editor.txt.html(_val);
    return editor;
}

4.引入顺序注意(先引入核心文件，再引入自定义函数js文件，最后引入业务文件)

<script src="${ctxPath}/static/js/wangEditor.js"></script>
<script src="${ctxPath}/static/js/editorConfig.js"></script>

5.编辑器区域内容获取

.set('content',ContentInfoDlg.editor.txt.html())

6.调用及初始化wangEditor(注意调用方法参数意义)

var editor=initEditorConfig('editor','myFileName','/content/upload','contentValue');
ContentInfoDlg.editor = editor;

7.后台上传代码

    /*
     * 在编辑器中上传图片
     */
    @RequestMapping(value = "/upload", produces = {"text/html;charset=UTF-8"},method= RequestMethod.POST)
    @ResponseBody
    public Object uploadReportFile(@RequestParam(value = "myFileName", required = false) MultipartFile cardFile,
                                   HttpServletRequest request, HttpSession session) {
        System.out.println("ContentController.uploadReportFile");
        String path = Class.class.getClass().getResource("/").getPath();
        path = path + "static" + File.separator + "uploadfiles";


        Map<String, String> map = new HashMap<String, String>();
        String jo = "";
        if (cardFile != null) {
            String oldFileName = cardFile.getOriginalFilename();
            String prefix = oldFileName.substring(oldFileName.lastIndexOf(".") + 1);
            if (prefix.equalsIgnoreCase("jpg") || prefix.equalsIgnoreCase("png")
                    || prefix.equalsIgnoreCase("jpeg") || prefix.equalsIgnoreCase("pneg")) {
                String fileName = System.currentTimeMillis()  + "_Content.jpg";
                File targetFile = new File(path, fileName);
                // 检测是否存在目录
                if (!targetFile.getParentFile().exists()) {
                    targetFile.getParentFile().mkdirs();
                }

                try {

                    cardFile.transferTo(targetFile);
                } catch (Exception e) {
                    e.printStackTrace();
                }

                String url = request.getContextPath() + "/static/uploadfiles/" + fileName;
                map.put("data", url);
                jo = JSONArray.toJSONString(map);
                return jo;
            } else {
                return "2";
            }
        }

        return null;
    }