guns+WangEditor图片上传与数据过滤实现

首先不得不说的枪前端架构设计的精巧

在JS中实现了属性的非页面绑定，什么意思？就是实现了JS代码和页面的html的轻解耦，轻数据传送

一个JS增删改查只要80行代码就能实现，而且非常具有通用性

接下来说说怎样实现编辑器编辑上传？

1.在HTML中导入editor.js内依赖

2.在localjs中指定*** _ info.js中初始化以下代码：

$(function() {
var editor=initEditorConfig('editor','myFileName','/upload1.html','contentVal');
HonorInfoDlg.editor = editor;
}

其中initEditorConfig是我对上传代码的封装，注意HTML中引入JS时保证editorConfig.js在*** _ info.js上方，而且wangEditor.js在editorConfig.js之上，如下：

<script type="text/javascript" src="${ctxPath}/static/js/plugins/wangEditor/wangEditor.js"></script>
<script type="text/javascript" src="${ctxPath}/static/modular/system/common/editorConfig.js"></script>
<script src="${ctxPath}/static/modular/system/honor/honor_info.js"></script>

如下创建一个editorConfig.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);
        }
    };
    editor.create();
    var _val = $('#'+contentId).val();
    editor.txt.html(_val);
    return editor;
}

上面哪里不懂的可以查询wangEditor官网即可

 

在** _ info.js中使用如下代码实现数据收集，其中this.honorInfoData ['content'] = HonorInfoDlg.editor.txt.html（）;便是收集编辑器中的数据

/**
 * 收集数据
 */
HonorInfoDlg.collectData = function() {
    this
    .set('id')
    .set('title')
    .set('time');
    this.honorInfoData['content'] = HonorInfoDlg.editor.txt.html();
}

 

后端：

/**
 * 新增荣誉管理
 */
@RequestMapping(value = "/add")
@ResponseBody
public Object add(Honor honor) {
    String content= com.stylefeng.guns.modular.system.tools.HtmlUnescapeUtil.Unescape2(honor.getContent());
    honor.setContent(content);
    System.out.println(honor.getContent());
    honorService.insert(honor);
    return SUCCESS_TIP;
}

com.stylefeng.guns.modular.system.tools.HtmlUnescapeUtil.Unescape2是我封装的数据转义代码，因为前端传送过来的HTML类型数据会被转义，所以后端将数据还原为HTML格式存入数据库，看下源码吧：

/**
 * 将前台text数据转换为html格式
 * @param content
 * @return
 */
public static String  Unescape2(String content){
    if(!content.isEmpty()){
        content=content.replace("& lt;","<");
        content=content.replace("& gt;",">");
        content=content.replace("imgsrc","img src");
        content= HtmlUtils.htmlUnescape(content);
    }
    return content;
}

这样基本实现了编辑器中数据的上传了！

 

但注意此时是不能实现在编辑器中图片的上传，需要后端代码：

/*
 * 在编辑器中上传图片
 */
@RequestMapping(value = "/upload1.html", produces = {"text/html;charset=UTF-8"},method= RequestMethod.POST)
@ResponseBody
public Object uploadReportFile(@RequestParam(value = "myFileName", required = false) MultipartFile cardFile,
                               HttpServletRequest request, HttpSession session) {
    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= FilenameUtils.getExtension(oldFileName);

        if(prefix.equalsIgnoreCase("jpg") || prefix.equalsIgnoreCase("png")
                || prefix.equalsIgnoreCase("jpeg") || prefix.equalsIgnoreCase("pneg")){
            String fileName = System.currentTimeMillis()+RandomUtils.nextInt(1000000)+"_IDcard.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;
}

注意“/upload1.html“和前端编辑器中配置的服务器地址一致哦！