markdown toc php,markdown在项目中的使用

前瞻

本文档主要介绍editor.md的使用，editor.md是国内开发的开源项目，可以实现markdown编辑器的所有功能，editor.md真的是很强大，在博客中使用很方便

使用框架

thinkphp3.2

使用

在项目中的使用

将下载的文档放到Public目录

上面标注的几个文件很重要

后台代码

#test-editormd li{

list-style:disc;

}

$(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

});

});

展示效果如下：

.result_content{

list-style:circle inside;

}

{$art['test-editormd-markdown-doc']}

$(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

});

});

上面的本地图片上传地址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 );

}

}

注意

是默认的显示mark文本的区域，默认的name值是test-editormd-markdown-doc，如果想更换content修改为即可

插入数据我就不管了，比较简单，自己弄下就可以了，我这块没有保留html，当开启saveHTMLToTextarea : true,然后在上面的下面加入打印就可以看到转换成html的内容，但是我打印的时候有些没有转换成html，所有我没有要，只是插入了test-editormd-markdown-doc，然后在前台利用editor.md自带函数markdownToHTML转换成html，这种方式当用户访问量大时，对服务器压力会大些

前台展示代码

#content li{

list-style:disc;

}

{$field['art_title']}

{:Date('Y-m-d',$field['art_time'])}

{$field['test-editormd-markdown-doc']}