Editor.md 的Markdown 编辑器集成与使用（全）
程序员文章站
2022-03-22 13:14:58
...
在这之前使用的编辑器是ueditor，是百度的；现在记录一下已经集成有段时间的 Editor.md 的 md 编辑器，确实好用！
在这之前，有个问题，数据库是保存 md 的还是保存 html 的，在网上看到过的方案：
- 保存两个字段：一个 md 的 ，一个 html 的；
- 保存md，每次阅读的时候现解析，会浪费cpu时间和资源；
- 保存 html，由于有文本字数限制，本来用户输入的字数符合要求，一解析成html，就超出数据库的长度设置了。
然而，Editor.md 就不用那么麻烦了，它已经集成好了，我们调用就好了；
其实，我可以偷偷地告诉你的，当然是存储 md 形式的啦！仔细想想就知道了，如果存储 html 的形式，你修改内容的时候不麻烦吗？存两个字段的时候，不仅浪费资源，而且修改内容还要同步。
好了，下面开始我们的骚操作，一切都是瞬息，一切都将过去，痛苦总是短暂的，快乐才是永恒的！我的骚不是你理解的骚！
忧郁的日子里，甩甩你的头发，总会发现头脑清醒，捂着胸口暗自忧伤！内心怒吼我命由我不由天，表面体现须行乐时且行乐；
感叹：好看的皮囊千篇一律，有趣的灵魂随地都是！谁说不呢？有趣是相互的，不是单方面！骚嘿！
Editor.md的项目地址
1、下载与安装：
或者通过 NPM 安装：
npm install editor.md或者通过 Bower 安装：
bower install editor.md2、项目提炼
下载解压后会得到 editor.md-master 文件夹，它的目录：
本人整理的，命名为 editor.md ，目录为：
除了css 文件和 js 文件，其他都是源文件里拷贝过来的，
css：1、style.css 文件是原文件的 examples/css/style.css ；2、editormd.css 是原文件的 css/editormd.css,
js：1、editormd.js 文件是原文件的 editormd.js，2、jquery.min.js 文件是原文件的 examples/js/jquery.min.js。
3、编辑状态
在 editor.md 文件同目录下新建一个 md.html：
<html lang="zh-cn">
<head>
<title>editor.md 编辑器</title>
<link rel="stylesheet" href="editor.md/css/style.css">
<link rel="stylesheet" href="editor.md/css/editormd.css">
<script type="text/javascript" src="editor.md/js/jquery.min.js"></script>
<script type="text/javascript" src="editor.md/js/editormd.js"></script>
</head>
<body>
<div id="editormd">
<textarea class="editormd-html-textarea" name="content"></textarea>
</div>
<script type="text/javascript">
/* 编辑器 */
var testEditor;
$(function() {
testEditor = editormd("editormd", {
width : "100%",
height : 400,
syncScrolling : "single",
path : "editor.md/lib/",
saveHTMLToTextarea : true, // 开启获取 html 源码
flowChart : true,//控制流程图编辑
sequenceDiagram : true,//控制时序图编辑
taskList : true,//任务列表
tex : true,//科学公式
emoji : true,//moji表情
//htmlDecode : true,
htmlDecode : "style,script,iframe|on*", // 开启 HTML 标签解析，为了安全性，默认不开启
codeFold : true, //ctrl+q代码折叠
imageUpload : true,//开启本地图片上传
imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
imageUploadURL : "/mdImage",//图片上传接口
dialogLockScreen : false, // 设置弹出层对话框不锁屏，全局通用，默认为true
dialogShowMask : false, // 设置弹出层对话框显示透明遮罩层，全局通用，默认为true
dialogDraggable : false, // 设置弹出层对话框不可拖动，全局通用，默认为true
dialogMaskOpacity : 0.4, // 设置透明遮罩层的透明度，全局通用，默认值为0.1
dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色，全局通用，默认为#fff
//自定义工具栏
toolbarIcons:function(){
return [
"undo", "redo", "|",
"bold", "del", "italic", "quote", "ucwords", "uppercase", "lowercase", "|",
"h1", "h2", "h3", "h4", "h5", "h6", "|",
"list-ul", "list-ol", "hr", "|",
"link", "reference-link", "image", "code", "preformatted-text", "code-block", "table", "datetime", "emoji", "html-entities", "pagebreak", "|",
"goto-line", "watch", "preview", "fullscreen", "clear", "search", "|",
"help", "info","leftIcon","centerIcon","rightIcon"]
},
//如果没有图标，可以文字表述toolbarIconTexts:{ leftIcon:"left",},
toolbarIconsClass:{
leftIcon:"fa-align-left",
centerIcon:"fa-align-center",
rightIcon:"fa-align-right"
},
// 自定义工具栏按钮的事件处理
toolbarHandlers : {
leftIcon : function(cm, icon, cursor, selection) {
cm.replaceSelection("<p align='left'>" + selection + "</p>");
if(selection === "") {
cm.setCursor(cursor.line, cursor.ch + 16);
}
},
centerIcon : function(cm, icon, cursor, selection) {
cm.replaceSelection("<p align='center'>" + selection + "</p>");
if(selection === "") {
cm.setCursor(cursor.line, cursor.ch + 18);
}
},
rightIcon : function(cm, icon, cursor, selection) {
cm.replaceSelection("<p align='right'>" + selection + "</p>");
if(selection === "") {
cm.setCursor(cursor.line, cursor.ch + 17);
}
}
},
lang : {
toolbar : {
leftIcon:"居左",
centerIcon:"居中",
rightIcon:"居右"
}
},
});
testEditor.getMarkdown(); //获取md
testEditor.getHTML(); //获取html
});
//testEditor.setMarkdown('');//清空编辑框的内容
</script>
</body>
</html>4、图片上传
php：
public function mdImage(){
//实例化存储引擎
//接收字段为什么是editormd-image-file？？？
$file =$this->request->file('editormd-image-file');
// 移动到框架应用根目录/uploads/ 目录下
$info = $file->validate(['ext'=>'jpg,jpeg,png,gif'])->rule('sha1')->move($this->dirFile());
if($info){
// 成功上传后 获取上传信息
$res = $info->getSaveName();
//返回值文档上面规定的格式是
return json(['success' => 1,'message' => '上传成功!',"url"=>'/uploads/Markdown/'.date('Ym').'/'.$res]);
}else{
// 上传失败获取错误信息
$res = $file->getError();
return $this->error($res);
}
}5、页面渲染（md => html）
<html lang="zh-cn">
<head>
<title>editor.md 渲染 html </title>
</head>
<body>
<div class="md_html" id="md_html">
<textarea style="display:none;">{$data.content}</textarea>
</div>
</body>
<!--引入md转html的css、js文件-->
<link rel="stylesheet" href="editor.md/css/editormd.css" />
<script src="editor.md/js/editormd.js"></script>
<script src="editor.md/lib/marked.min.js"></script>
<script src="editor.md/lib/prettify.min.js"></script>
<script src="editor.md/lib/raphael.min.js"></script>
<script src="editor.md/lib/underscore.min.js"></script>
<script src="editor.md/lib/sequence-diagram.min.js"></script>
<script src="editor.md/lib/flowchart.min.js"></script>
<script src="editor.md/lib/jquery.flowchart.min.js"></script>
<script type="text/javascript" src="editor.md/js/jquery.min.js"></script>
<script type="text/javascript">
editormd.markdownToHTML('md_html',{
htmlDecode: "style,script,iframe", //可以过滤标签解码
emoji: true,
taskList: true,
tex: true,
flowChart: true,
sequenceDiagram: true,
});
</script>
</html>你看，我多贴心啊！
我去，一大堆的，写的什么鬼啊，一点都看不懂！菜鸡
你走，我不需要你！呜呜呜......，我容易吗我！
.
.
.
.
.
.
不点赞的，我都怀疑你在骂我呢？哼！