首页 > Web开发 > 详细

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

时间:2019-05-31 16:01:25      阅读:267      评论:0      收藏:0      [点我收藏+]

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

 

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

原文:https://www.cnblogs.com/jcydd/p/10955532.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!