PHP專案中使用 Markdown編輯器
個人站點 :http://oldchen.iwulai.com/
Markdown在技術圈越來越受歡迎,今天為大家帶來一款國內開源的比較好用的Markdown編輯器——editor.md。
在這次專案中客戶要求後臺編輯技術文章使用Markdown編輯器;慌張地看文件.......
需要預覽效果可直接訪問url:
https://pandao.github.io/editor.md/index.html
同時提供了全套的下載安裝教程。github開源地址:
https://github.com/pandao/editor.md/blob/master/examples/image-upload.html
在首頁下載完成,解壓editor.md-master.zip檔案,可以看到如下圖的目錄結構:
- css目錄中可選擇editormd.min.css放在對應的專案css目錄中;
- js可選擇editormd.min.js放置在對應專案的js目錄中,需要注意的是同時需要引入jQuery,這裡使用jquery.min.js;
- examples資料夾中是一部分核心功能的demo,在使用的過程中用到對應的元件或功能可開啟參考;
- fonts是需要用到字型,可一併引入專案;
- images是一些載入類的圖片;
- lib是editor.md依賴的第三方js資源,比如流程圖的js資源;
- plugins主要是編輯器上面的操作功能外掛,比如圖片上傳等,可選擇使用的進行載入;
引入css和js
在使用到editor.md的頁面引入css和js:
<!--引入樣式檔案--> <link rel="stylesheet" href="__PUBLIC__/markdown/examples/css/style.css" /> <link rel="stylesheet" href="__PUBLIC__/markdown/css/editormd.css" /> <!--引入js檔案--> <script type="text/javascript" src="__PUBLIC__/markdown/examples/js/jquery.min.js"></script> <script type="text/javascript" src="__PUBLIC__/markdown/editormd.js"></script> <script type="text/javascript" src="__PUBLIC__/markdown/editormd.amd.js"></script>
頁面中新增div
在需要新增editor.md編輯器的地方輸入以下div:
<!--編輯器開始--> <div id="test-editormd" name="post[post_content]"> <textarea name="post[post_content]"></textarea> </div> <!--編輯器結束-->
注意:此處需要注意的是,無論需要html格式的內容還是markdown格式的內容,都只需要寫一個textarea。此處有一個很大的坑。不少其他教程中說需要兩個textarea,那麼會導致後一個textarea後臺獲得的資料是一個數組,而不是單純的HTML內容。
頁面新增js程式碼
js程式碼用來將上面的textarea進行渲染:
<!--js開始--> <script> $(function() { var testEditor = editormd("test-editormd", { width : "90%", height : 600, syncScrolling : "single", path : "__PUBLIC__/markdown/lib/", imageUpload : true, imageFormats : ["jpg","jpeg","gif","png","bmp","webp"], imageUploadURL : "{:U('Portal/AdminPost/upload')}",//上傳圖片用,,這是tp的上傳 saveHTMLToTextarea : true }) }); </script> <!--js結束-->
上傳圖片後臺程式碼展示:
public function upload() { if (IS_POST) {//判斷是不是POST $savepath=date('Ymd').'/'; //上傳處理類 $config=array( 'rootPath' => './'.C("UPLOADPATH"), 'savePath' => $savepath, 'maxSize' => 11048576, 'saveName' => array('uniqid',''), 'exts' => array('jpg', 'gif', 'png', 'jpeg',"txt",'zip'), 'autoSub' => false, ); $upload = new \Think\Upload($config);// $info=$upload->upload(); $first=array_shift($info); // 開始上傳 if(!$first) {// 上傳錯誤提示錯誤資訊 $this->error($upload->getError()); }else{// 上傳成功 獲取上傳檔案資訊 //返回資料的組裝 $path=$first['savepath']; $name=$first['savename']; $path_='http://'.$_SERVER['HTTP_HOST']."/data/upload/".$path."/".$name; //必須ajaxReturn $this->ajaxReturn(array( 'url'=>$path_, 'success'=>1, 'message'=>'upload success!' )); } } }
注意:editor.md
期望你上傳圖片的服務返回如下json格式的內容
{ success : 0 | 1, //0表示上傳失敗;1表示上傳成功 message : "提示的資訊", url : "圖片地址" //上傳成功時才返回 }