前瞻
本文档主要介绍editor.md的使用，editor.md是国内开发的开源项目，可以实现markdown编辑器的所有功能，editor.md真的是很强大，在博客中使用很方便
使用框架
thinkphp3.2
使用
- 下载editor.md
下载地址：https://git.oschina.net/pandao/editor.md
网盘地址：链接：http://pan.baidu.com/s/1gf5KIAZ 密码：8ebh - 在项目中的使用
- 将下载的文档放到Public目录
上面标注的几个文件很重要
- 将下载的文档放到Public目录
- 后台代码
<!--文章添加页-->
<style>
#test-editormd li{
list-style:disc;
}
</style>
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="__PUBLIC__/markdown/css/editormd.min.css" />
<div id="test-editormd">
<textarea style="display:none;">
</textarea>
<!-- 第二个隐藏文本域，用来构造生成的HTML代码，方便表单POST提交，这里的name可以任意取，后台接受时以这个name键为准 -->
<textarea class="editormd-html-textarea" name="text"></textarea>
</div>
<script src="/Public/markdown/examples/js/jquery.min.js"></script>
<script src="__PUBLIC__/markdown/editormd.js"></script>
<script type="text/javascript">
$(function() {
testEditor = editormd("test-editormd", {
width : "100%",//宽度
height : 720,//高度
// 下面三个选项是设置风格的，每个有什么风格，请看下载插件得examples/themes.html
theme : "lesser-dark",// 工具栏风格
previewTheme : "dark",// 预览页面风格
editorTheme : "paraiso-dark",// 设置编辑页面风格
path : '__PUBLIC__/markdown/lib/',//这块是lib的文件路径，必须设置，否则几个样式css，js访问不到的
flowChart : true,//控制流程图编辑
sequenceDiagram : true,//控制时序图编辑
taskList : true,//任务列表
tex : true,//科学公式
emoji : true,//moji表情
htmlDecode : "style,script,iframe|on*", // 开启 HTML 标签解析，为了安全性，默认不开启
codeFold : true,//ctrl+q代码折叠
// saveHTMLToTextarea : true,//这个配置在simple.html中并没有，但是为了能够提交表单，使用这个配置可以让构造出来的HTML代码直接在第二个隐藏的textarea域中，方便post提交表单。这个转换好像有些缺陷，有些配置没有生效，目前还没想到怎么解决，我这里没有用,是在前台读取的时候转换的
imageUpload : true,//开启本地图片上传
imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
imageUploadURL : "/index.php/Admin/News/uploadFileMark",//图片上传地址
onload : function() {
console.log('onload', this);
}
});
//设置可以添加目录，只需要在上面一行输入 [TOCM]，就会有目录，注意下面要空一行
testEditor.config({
tocm : true,
tocContainer : "",
tocDropdown : false
});
});
</script>
展示效果如下：
<!--文章修改页-->
<link rel="stylesheet" href="__PUBLIC__/markdown/css/editormd.min.css" />
<style>
.result_content{
list-style:circle inside;
}
</style>
<div id="test-editormd">
<textarea style="display:none;">{$art['test-editormd-markdown-doc']}
</textarea>
</div>
<script src="/Public/markdown/examples/js/jquery.min.js"></script>
<script src="__PUBLIC__/markdown/editormd.js"></script>
<script type="text/javascript">
$(function() {
testEditor = editormd("test-editormd", {
width : "100%",//宽度
height : 720,//高度
// 下面三个选项是设置风格的，每个有什么风格，请看下载插件得examples/themes.html
theme : "lesser-dark",// 工具栏风格
previewTheme : "dark",// 预览页面风格
editorTheme : "paraiso-dark",// 设置编辑页面风格
path : '__PUBLIC__/markdown/lib/',//这块是lib的文件路径，必须设置，否则几个样式css，js访问不到的
flowChart : true,//控制流程图编辑
sequenceDiagram : true,//控制时序图编辑
taskList : true,//任务列表
tex : true,//科学公式
emoji : true,//moji表情
htmlDecode : "style,script,iframe|on*", // 开启 HTML 标签解析，为了安全性，默认不开启
codeFold : true,//ctrl+q代码折叠
// saveHTMLToTextarea : true,//这个配置在simple.html中并没有，但是为了能够提交表单，使用这个配置可以让构造出来的HTML代码直接在第二个隐藏的textarea域中，方便post提交表单。这个转换好像有些缺陷，有些配置没有生效，目前还没想到怎么解决，我这里没有用,是在前台读取的时候转换的
imageUpload : true,//开启本地图片上传
imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
imageUploadURL : "/index.php/Admin/News/uploadFileMark",//图片上传地址
onload : function() {
console.log('onload', this);
}
});
//设置可以添加目录，只需要在上面一行输入 [TOCM]，就会有目录，注意下面要空一行
testEditor.config({
tocm : true,
tocContainer : "",
tocDropdown : false
});
});
</script>
上面的本地图片上传地址imageUploadURL : "/index.php/Admin/News/uploadFileMark",uploadFileMark方法的代码如下:
/**
* 本地markdown图片上传方法
*/
public function uploadFileMark()
{
// 实例化上传类
$upload = new \Think\Upload();
// 设置附件上传大小 PHP配置文件限定(upload_max_filesize = 2M),需要修改下配置文件
$upload->maxSize = 3145728;
// // 设置附件上传类型
// $upload->exts = array('jpg', 'gif', 'png', 'jpeg');
// 设置附件上传目录
$upload->savePath = '/Uploads/';
//文件上传保存的根路径 (必写)
$upload->rootPath = './Public';
// 执行上传文件
$info = $upload->upload();
$fileName = trim($upload->rootPath, '.') . $info['editormd-image-file']['savepath'] . $info['editormd-image-file']['savename'];
if( $info ){
$msg = array('success' => 1,'message' => '上传成功!', 'url' => $fileName);
echo json_encode( $msg );
}else{
$msg = array('success' => 0,'message' => '上传失败!');
echo json_encode( $msg );
}
}
注意
<textarea style="display:none;"></textarea>是默认的显示mark文本的区域，默认的name值是test-editormd-markdown-doc，如果想更换content修改为<textarea name='content' style="display:none;"></textarea>即可
插入数据我就不管了，比较简单，自己弄下就可以了，我这块没有保留html，当开启saveHTMLToTextarea : true,然后在上面的<textarea style="display:none;"></textarea>下面加入<textarea name='text' style="display:none;"></textarea>打印就可以看到转换成html的内容，但是我打印的时候有些没有转换成html，所有我没有要，只是插入了test-editormd-markdown-doc，然后在前台利用editor.md自带函数markdownToHTML转换成html，这种方式当用户访问量大时，对服务器压力会大些前台展示代码
<style>
#content li{
list-style:disc;
}
</style>
<div class="newstitle">
<h2>{$field['art_title']}</h2>
<p><span>{:Date('Y-m-d',$field['art_time'])}</span></p>
</div>
<script src="__PUBLIC__/markdown/lib/marked.min.js"></script>
<script src="__PUBLIC__/markdown/lib/prettify.min.js"></script>
<script src="__PUBLIC__/markdown/lib/raphael.min.js"></script>
<script src="__PUBLIC__/markdown/lib/underscore.min.js"></script>
<script src="__PUBLIC__/markdown/lib/sequence-diagram.min.js"></script>
<script src="__PUBLIC__/markdown/lib/flowchart.min.js"></script>
<script src="__PUBLIC__/markdown/lib/jquery.flowchart.min.js"></script>
<script src="__PUBLIC__/markdown/editormd.js"></script>
<div id="content" class="contenttext">
<textarea style="display:none;" name="editormd-markdown-doc">{$field['test-editormd-markdown-doc']}</textarea>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
editormd.markdownToHTML("content", {
htmlDecode : "style,script,iframe", // you can filter tags decode
emoji : true,
taskList : true,
tex : true, // 默认不解析
flowChart : true, // 默认不解析
sequenceDiagram : true, // 默认不解析
tocm : true,//菜单
tocContainer : "",
tocDropdown : false
});
})
</script>
搞定，我用的的是官网的完整示例（ https://pandao.github.io/editor.md/examples/full.html ），除了moji表情，其他都显示了，展示效果如下
如果想做什么功能，去官方示例（ https://pandao.github.io/editor.md/examples/index.html ） 看效果，然后在你下载的目录里面有个examples，有对应的html，对应着添加配置文件即可
如果没弄好不行，还可以参考下其他的文档：http://blog.csdn.net/hj960511/article/details/53037618
