# 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> ```