thinkphp5使用Markdown编辑器Editor.md并上传图片

最新推荐文章于 2023-06-07 15:26:42 发布

dk2319193

最新推荐文章于 2023-06-07 15:26:42 发布

阅读量649

点赞数

文章标签： php markdown json

原文链接：http://www.cnblogs.com/jcydd/p/10955532.html

版权

Editor.md官网：https://pandao.github.io/editor.md/index.html

下载后解压放到项目内，和引入ueditor差不多

1、引入项目资源

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

2、在自己的页面中加上对应的id

 <div id="test-editormd">
        <textarea></textarea>
 </div>

3、配置编辑器

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

4、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('非法请求');
        }
        
    }