一般情况下，editor.md的上传图片功能已经够用了，提供了两种方式：本地上传和跨域上传，方式也很简单，跨域上传的话，则需要加callbackUrl的地址。参考：http://www.ipandao.com/editor.md/examples/image-upload.html 和 http://www.ipandao.com/editor.md/examples/image-cross-domain-upload.html。
不过我的问题和上面的不一样，因为我使用了PHP开发框架，那么在正常开发的过程中，表单提交都有csrf的验证。editor.md却没有这个功能，在官方的issue里有人提出了，可以通过设置uploadUrl来加入get参数。
嗯，理论上这样也OK。然而我使用的是YII2，在实际使用中，这个办法无效，原因是：
PHP代码
- public function validateCsrfToken($token = null)
- {
- $method = $this->getMethod();
- // only validate CSRF token on non-"safe" methods http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.1.1
- if (!$this->enableCsrfValidation || in_array($method, ['GET', 'HEAD', 'OPTIONS'], true)) {
- return true;
- }
- $trueToken = $this->loadCsrfToken();
- if ($token !== null) {
- return $this->validateCsrfTokenInternal($token, $trueToken);
- } else {
- return $this->validateCsrfTokenInternal($this->getBodyParam($this->csrfParam), $trueToken)
- || $this->validateCsrfTokenInternal($this->getCsrfTokenFromHeader(), $trueToken);
- }
- }
看最后两个判断，只判断了POST和HEADER中有Csrf的情况，没有判断GET参数里的情况，如果你的项目已经趋向于稳定，不再随便升级Yii的版本，你可以在$this->validateCsrfTokenInternal($this->getBodyParam($this->csrfParam), $trueToken)加一行：
PHP代码
- || $this->validateCsrfTokenInternal($this->get($this->csrfParam),$trueToken)
即，允许从GET参数中获取 csrf的值。
然而，很多时间我们都会手贱去composer update，所以这个方法有点不太敢使用。最终，还是决定修改editor.md的插件，在image-dialog.js中加入几行：
JavaScript代码
- if (settings.crossDomainUpload)
- {
- action += "&callback=" + settings.uploadCallbackURL + "&dialog_id=editormd-image-dialog-" + guid;
- }
- //在上面的if代码后先加入csrfToken的值的获取
- var csrfToken = $('meta[name="csrf-token"]').attr('content');
- var csrfField = "";
- if (csrfToken) {
- var csrfParam = $('meta[name="csrf-param"]').attr('content');
- csrfField = "<input type='hidden' name='" + csrfParam + "' value='" + csrfToken + "' />";
- }
然后在下面的dialogContent里加入csrfField的内容，使之 变成：
JavaScript代码
- var dialogContent = ( (settings.imageUpload) ? "<form action=\"" + action +"\" target=\"" + iframeName + "\" method=\"post\" enctype=\"multipart/form-data\" class=\"" + classPrefix + "form\">" : "<div class=\"" + classPrefix + "form\">" ) +
- ( (settings.imageUpload) ? "<iframe name=\"" + iframeName + "\" id=\"" + iframeName + "\" guid=\"" + guid + "\"></iframe>" : "" ) +
- "<label>" + imageLang.url + "</label>" +
- "<input type=\"text\" data-url />" + (function(){
- return (settings.imageUpload) ? "<div class=\"" + classPrefix + "file-input\">" +
- "<input type=\"file\" name=\"" + classPrefix + "image-file\" accept=\"image/*\" />" +
- csrfField +
- "<input type=\"submit\" value=\"" + imageLang.uploadButton + "\" />" +
- "</div>" : "";
- })() +
- "<br/>" +
- "<label>" + imageLang.alt + "</label>" +
- "<input type=\"text\" value=\"" + selection + "\" data-alt />" +
- "<br/>" +
- "<label>" + imageLang.link + "</label>" +
- "<input type=\"text\" value=\"http://\" data-link />" +
- "<br/>" + csrfField +
- ( (settings.imageUpload) ? "</form>" : "</div>");
注意红字所在地方，其实就加了这个字段而已。再次提交图片上传的时候，不会再报400错误了。
