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

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