PHP项目中使用 Markdown编辑器

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     : "图片地址" //上传成功时才返回
}

發表回覆

你的電郵地址並不會被公開。 必要欄位標記為 *