thinkphp5使用Markdown編輯器Editor.md並上傳圖片

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>

二、在本身的頁面中加上對應的id

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

四、tp5後臺圖片上傳代碼

 //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('非法請求');
        }
        
    }
相關文章
相關標籤/搜索