https://blog.csdn.net/qq_38191191/article/details/84866590
个人站点 :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 : "图片地址" //上传成功时才返回
}
原文:https://blog.csdn.net/qq_38191191/article/details/84866590