最近在自己新建的博客后臺中使用Editor.md作為發(fā)布文章的編輯器，后來在做上傳圖片的時候遇到了一些難題，就是提交的表單中沒有Token，無法通過Laravel的VerifyCsrfToken中間件檢查。本文將講解如何解決這個問題。
Editor.md 主要特性
- 支持“標準”Markdown / CommonMark和Github風格的語法，也可變身為代碼編輯器；
- 支持實時預(yù)覽、圖片（跨域）上傳、預(yù)格式文本/代碼/表格插入、代碼折疊、搜索替換、只讀模式、自定義樣式主題和多語言語法高亮等功能；
- 支持ToC（Table of Contents）、Emoji表情、Task lists、@鏈接等Markdown擴展語法；
- 支持TeX科學公式（基于KaTeX）、流程圖 Flowchart 和 時序圖 Sequence Diagram;
- 支持識別和解析HTML標簽，并且支持自定義過濾標簽解析，具有可靠的安全性和幾乎無限的擴展性；
- 支持 AMD / CMD 模塊化加載（支持 Require.js & Sea.js），并且支持自定義擴展插件；
- 兼容主流的瀏覽器（IE8+）和Zepto.js，且支持iPad等平板設(shè)備；
- 支持自定義主題樣式；
Github下載地址：https://github.com/pandao/editor.md
前端js配置
/* 配置editormd */
var editor = editormd("editormd", {
path: "{{ asset('/editor.md/lib/') }}",
height: 700,
syncScrolling: "single",
toolbarAutoFixed: false,
saveHTMLToTextarea: false,
imageUpload: true,
imageFormats : ["jpg","jpeg","gif","png","bmp","webp"],
imageUploadURL:"{{url('backend/uploadimage')}}"
});
方法和路由
public function uploadimage(Request $request)
{
$message='';
if (!$this->disk->exists('/article')) {
$message = "article 文件夾不存在,請先創(chuàng)建";
}else{
$pathDir=date('Ymd');
if(!$this->disk->exists('/article/'.$pathDir)){
$this->disk->makeDirectory('/article/'.$pathDir);
}
}
if($request->file('editormd-image-file')){
$path="uploads/article/".$pathDir;
$pic = $request->file('editormd-image-file');
if($pic->isValid()){
$newName=md5(time() . rand(0, 10000)).".".$pic->getClientOriginalExtension();
if($this->disk->exists($path.'/'.$newName)){
$message = "文件名已存在或文件已存在";
}else{
if($pic->move($path,$newName)){
$url = asset($path.'/'.$newName);
}else{
$message="系統(tǒng)異常，文件保存失敗";
}
}
}else{
$message = "文件無效";
}
}else{
$message="Not File";
}
$data = array(
'success' => empty($message) ? 1 : 0, //1：上傳成功 0：上傳失敗
'message' => $message,
'url' => !empty($url) ? $url : ''
);
header('Content-Type:application/json;charset=utf8');
exit(json_encode($data));
}
Route::group(['prefix' => 'backend'], function () {
Route::post('uploadimage',['uses'=>'Backend\UploadController@uploadimage']);
});
上傳報錯
我們可以發(fā)現(xiàn)會出現(xiàn)500錯誤，這是由Laravel 的TokenMismatchException異常導致的，也就是Laravel默認開啟了防CSRF，而Editor.md 的上傳表單中并沒有包含token，所以才會出現(xiàn)這個錯誤。
解決方法
當我們點擊上傳圖片的時候會彈出上傳框，這個就是上傳的表單，我們可以用調(diào)試器查出這是請求了image-dialog.js，具體路徑為editor.md/plugins/image-dialog/image-dialog.js。我們可以對其中的var dialogContent變量進行就修改。
具體的修改代碼
if (settings.crossDomainUpload)
{
action += "&callback=" + settings.uploadCallbackURL + "&dialog_id=editormd-image-dialog-" + guid;
}
var csrfToken = $('meta[name="_token"]').attr('content');
var csrfField = "";
if (csrfToken) {
csrfField = "<input type='hidden' name='_token' value='" + csrfToken + "' />";
}
- 在if(settings.crossDomainUpload)結(jié)束后加上這5行代碼，接下來，將csrfField 變量加入到下面的代碼中。
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>");
- 然后在請求的頁面頭部加上這行代碼
<meta name="_token" content="{{ csrf_token() }}"/>
這樣再次請求上傳圖片就可以把token帶過去。
