PHP项目中使用 Markdown编辑器

个人站点 :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文件，可以看到如下图的目录结构：

PHP项目中使用 Markdown编辑器

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

PHP项目中使用 Markdown编辑器

引入css和js

页面中添加div

页面添加js代码

相关推荐