Editor.md官網:https://pandao.github.io/editor.md/index.htmlcss
下載後解壓放到項目內,和引入ueditor差很少html
<!--markdown編輯器--> <script src="{$Think.config.__STATIC__}/admin/plus/editormd/jquery.min.js"></script> <link rel="stylesheet" href="{$Think.config.__STATIC__}/admin/plus/editormd/css/editormd.css" /> <script src="{$Think.config.__STATIC__}/admin/plus/editormd/editormd.min.js"></script>
<div id="test-editormd"> <textarea></textarea> </div>
<script> var testEditor; testEditor = editormd("test-editormd", { placeholder:'本編輯器支持Markdown編輯,左邊編寫,右邊預覽', //默認顯示的文字,這裏就不解釋了 width: "100%", height: 640, syncScrolling: "single", path: "{$Think.config.__STATIC__}/admin/plus/editormd/lib/", //你的path路徑(原資源文件中lib包在咱們項目中所放的位置) theme: "white",//工具欄主題 previewTheme: "white",//預覽主題 editorTheme: "pastel-on-white",//編輯主題 imageUpload : true, imageFormats : ["jpg","jpeg","gif","png","bmp","webp"], imageUploadURL : "{:url('Knowledge/uploadImg')}",//上傳圖片使用方法 saveHTMLToTextarea: true, emoji: true, taskList: true, tocm: true, // Using [TOCM] tex: true, // 開啓科學公式TeX語言支持,默認關閉 flowChart: true, // 開啓流程圖支持,默認關閉 sequenceDiagram: true, // 開啓時序/序列圖支持,默認關閉, toolbarIcons : function() { //自定義工具欄,後面有詳細介紹 return editormd.toolbarModes['full']; // full, simple, mini }, }); testEditor.getMarkdown(); // 在js中調用getMarkdown這個方法能夠得到Markdown格式的文本。 </script>
//Markdown上傳圖片 public function uploadImg(){ if(request()->isPost()){ $file = request()->file('editormd-image-file'); $info = $file->move( './uploads/knowledge'); if($info){ $value=config('uploadFiles').'/knowledge/'.$info->getSaveName(); return json(['url'=>$value,'success'=>1,'message'=>'圖片上傳成功!']); } else{ echo $file->getError(); } }else{ $this->error('非法請求'); } }