前瞻
本文档主要介绍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']}