editor.md上传图片 image-dialog.js报错解决

在使用富文本编辑器editor.md的过程中，发现前后端代码都没有问题，但是总是报错，不能上传成功，也没有进入后台上传图片部分的代码。

报错信息如下：

jquery.js:8510 POST http://localhost/uploadFile?guid=1557654068165 405
trigger @ jquery.js:8510
(anonymous) @ jquery.js:8549
each @ jquery.js:367
each @ jquery.js:202
trigger @ jquery.js:8548
(anonymous) @ image-dialog.js:176
dispatch @ jquery.js:5237
elemData.handle @ jquery.js:5044
VM366:1 Uncaught SyntaxError: Unexpected token W in JSON at position 0
    at JSON.parse ()
    at HTMLIFrameElement.uploadIframe.onload (image-dialog.js:161)

经过多次调试检验，发现是由于使用了csrf导致的，使用了csrf在前后端交互过程中必须带有一个token。

暂时的解决方法是关闭csrf…
在Security配置代码中添加关闭csrf的代码:

	@Override
	protected void configure(HttpSecurity http) throws Exception {
		http.authorizeRequests().antMatchers("/css/**", "/js/**", "/fonts/**", "/index", "/editormd/**").permitAll() // 都可以访问
				.antMatchers("/admin/**").hasRole("ADMIN") // 需要相应的角色才能访问
				.and()
				.formLogin()   //基于 Form 表单登录验证
				.loginPage("/login").failureUrl("/login-error") // 自定义登录界面
				.and().rememberMe().key(KEY) // 启用 remember me
				.and().exceptionHandling().accessDeniedPage("/403");  // 处理异常，拒绝访问就重定向到 403 页面
		http.headers().frameOptions().sameOrigin(); // 允许来自同一来源的H2 控制台的请求
		http.csrf().disable();   //***********关闭csrf*********///
	}

后续找到真正的解决方法再填坑***

---

真正的原因是editor.md没有支持csrf，上面关闭csrf的方式确实有点过于粗暴。可以修改上传图片的部分代码实现支持csrf。

1、修改image-dialog.js 文件
在

if (settings.crossDomainUpload)  
{  
    action += "&callback=" + settings.uploadCallbackURL + "&dialog_id=editormd-image-dialog-" + guid;  
}  

后面添加代码：

 var csrfToken = $('meta[name="_csrf_token"]').attr('content');
  var csrfField = "";
  if (csrfToken) {
      var csrfParam = $('meta[name="_csrf_param"]').attr('content');
      csrfField = "";
  }

修改dialogContent为：

var dialogContent = ( (settings.imageUpload) ? "
" : "
" ) +  
                        ( (settings.imageUpload) ? "" : "" ) +  
                        "" + imageLang.url + "" +  
                        "" + (function(){  
                            return (settings.imageUpload) ? "
" +  
                                                                "" +  
                                                                csrfField +  
                                                                "" +  
                                                            "
" : "";  
                        })() +  
                        "
" +  
                        "" + imageLang.alt + "" +  
                        "" +  
                        "
" +  
                        "" + imageLang.link + "" +  
                        "" +  
                        "
" + csrfField +  
                    ( (settings.imageUpload) ? "" : "
");  

前端在页面加上以下代码：

完成