# editor.md editor.md 是開源在線 Markdown 編輯器，在原功能上增加了粘貼、拖放上傳圖片功能，細節可以參考 [Editor.md官網](https://pandao.github.io/editor.md/)  ## 前臺 ``` <div id="editormd"> <textarea style="display:none;"></textarea> </div> <script> require(['hdjs'], function (hdjs) { hdjs.editormd("editormd", { width: '100%', height: 300, toolbarIcons : function() { return [ "bold", "del", "italic", "quote","|", "list-ul", "list-ol", "hr", "|", "link", "hdimage", "code-block", "|", "watch", "preview", "fullscreen" ] }, //后臺上傳地址，默認為 hdjs配置項window.hdjs.uploader server:'', //editor.md庫位置 path: "{{asset('org/hdjs')}}/package/editor.md/lib/" }); }); </script> ``` * laravel等框架使用是在 head 標簽添加 `<meta name="csrf-token" content="{{ csrf_token() }}">` * 系統用 window.editormd (id值) 記錄編輯器對象，可以使用editormd編輯器系統方法了，比如選擇內容等。 * ## 后臺 粘貼上傳是BASE64格式需要特殊處理一下，下面是Laravel框架的代碼，上傳功能使用的是 [Laravel-upload組件](https://github.com/houdunwang/laravel-upload) ``` ... public function upload(Request $request) { //普通上傳 if ($request->file('file')) { $event = new UploadEvent($request->file('file')); event($event); #上傳成功的文件 return ['file' => url($event->getFile()), 'code' => 0]; } elseif ($content = $request->input('file')) { //粘貼上傳BASE64圖片，如editor.md編輯器中的使用 $imgdata = substr($content, strpos($content, ",") + 1); $decodedData = base64_decode($imgdata); $fileName = 'uploads/' . date('ym/d') . '/' . str_random(10) . microtime(true) . '.jpeg'; file_put_contents($fileName, $decodedData); return ['file' => url($fileName), 'code' => 0]; } } ``` ## 代碼高亮 ``` <div class="markdown" id="content"> <textarea hidden># 這里是markdown內容 </textarea> </div> <script> require(['hdjs', 'marked', 'MarkdownIt', 'highlight'], function (hdjs, marked, MarkdownIt) { //轉markdown為html let md = new MarkdownIt(); $("#content").html(md.render($("#content textarea").val())); //代碼高亮 $('pre code').each(function (i, block) { hljs.highlightBlock(block); }); }) </script> ```