個人站點 :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     : "圖片地址" //上傳成功時才返回
}