在项目中集成富文本编辑器
作者公众号：编程之外
小程序：编程之外
Hexo博客：http://vogos.cn/
前言
现在学程序的都离不开 Markdown 语法了吧，Markdown 已经成为典型的转换为HTML的非正式规范和参考实现，现在市场上也出现了许多Markdown实现，在基本语法之上额外增加了表格，脚注，列表…等等许多新功能。
相对于 Word，Markdown 语法的简洁，高效，便捷，以及对代码格式的支持等等，实在是优于 Word 太多太多，当然 Word 还是有自己的优点的，只是对于我这种学程序的人更倾向于Markdown，看下面Markdown语法写的学习笔记，它不比Word香嘛????????????
目前市场上有很多支持Markdown语法的在线和本地的富文本编辑器，例如：Typora、Simplenote、Laverna、有道云笔记，以及博客园，CSDN，简书，掘金，GitHub等等，其中Typora 是我最常用的一款本地编辑器。
富文本编辑器
既然Markdown那么流行，富文本编辑器也是博客系统中必不可少的一个重要业务点，那怎么在项目中集成富文本编辑器来支持Markdown语法呢？
先介绍目前市场上比较流行的几款富文本编辑器：
Editor.md ： https://pandao.github.io/editor.md/
Simditor：https://simditor.tower.im/
Kindeditor：http://kindeditor.net/demo.php
wangEditor：http://www.wangeditor.com/
CKEditor 5：https://ckeditor.com/ckeditor-5/demo/
上面只列出了五个，市场上其实还有非常多的富文本编辑器，如 summernote、jodit 等，这里就不一一介绍了，由于我不是每一个都使用过，这里也不对比他们的优缺点了，想要学习的可到他们对应的官网了解，这里只介绍我常用的一款 Editor.md
集成Editor.md
如下在项目中集成 Editor.md 的效果，左侧编辑，右侧实时预览，非常的清新便捷，Editor.md 也提供了很多属性可以在初始化时自定义。
使用Editor.md：
1、打开 Editor.md 官网 https://pandao.github.io/editor.md/ 下载它的依赖文件与示例，这里是在GitHub下载，不能合理上网的小伙伴可能下载的非常慢，也可以在我的公众号回复关键字 editormd 获取我下载好的压缩包。
2、下载解压后会得到如下目录文件，下面只介绍几个重要的文件目录
3、添加到自己的项目中：如下，上面介绍的几个重要文件和目录，除了 examples 外都复制到自己的项目中
4、注意：Editor.md 需要依赖 jQuery ，所以在引入Editor.md的css和js文件之前，需要先引入jQuery的 js 文件，可以使用jQuery的在线CDN，也可以下载到本地引入
编辑器展示区域：
<div id="md-content" style="z-index: 1;clear: both;">
<textarea placeholder="文章内容" name="content"></textarea>
</div>
初始化Editor.md：
<script type="text/javascript">
//==== 初始化Editor.md插件, 定位到 md-content 节点 ======
var contentEditor;
$(function() {
contentEditor = editormd("md-content", {
width : "100%",
height : 640,
syncScrolling : "single",
// path : "/plugins/editormd/lib/"
path : "./editormd/lib/",
theme: "dark", //工具栏主题
// previewTheme: "dark", //预览主题
// editorTheme: "pastel-on-dark",//编辑主题
emoji: true, // 开启表情包支持，默认关闭
tex : true, // 开启科学公式TeX语言支持，默认关闭
flowChart : true, // 开启流程图支持，默认关闭
sequenceDiagram : true, // 开启时序/序列图支持，默认关闭,
//图片上传
imageUpload : true,
imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
imageUploadURL : "/blog/file/upload",
onload : function() {
console.log('markdown编辑器onload初始化：', this);
},
});
});
</script>
完整引入示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--移动端适配设置-->
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Editor.md使用示例</title>
<!--markdown插件-->
<link rel="stylesheet" href="./editormd/css/editormd.css">
</head>
<body style="background-color: #AEEEEE">
<div style="">
<div style="text-align: center;">
<h2 style="color: orange">Editor.md使用示例</h2>
</div>
<!--===== 文章内容 =====-->
<div id="md-content" style="z-index: 1;clear: both;">
<textarea placeholder="文章内容" name="content"></textarea>
</div>
</div>
<!-- jQuery 在线CDN ,也可以引入本地jQuery的js文件-->
<script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js"></script>
<!-- Editor.md 的JS依赖 -->
<script src="./editormd/editormd.js"></script>
<script type="text/javascript">
//==== 初始化Editor.md插件, 定位到 md-content 节点 ======
var contentEditor;
$(function() {
contentEditor = editormd("md-content", {
width : "100%",
height : 640,
syncScrolling : "single",
// path : "/plugins/editormd/lib/"
path : "./editormd/lib/",
theme: "dark", //工具栏主题
// previewTheme: "dark", //预览主题
// editorTheme: "pastel-on-dark",//编辑主题
emoji: true, // 开启表情包支持，默认关闭
tex : true, // 开启科学公式TeX语言支持，默认关闭
flowChart : true, // 开启流程图支持，默认关闭
sequenceDiagram : true, // 开启时序/序列图支持，默认关闭,
//图片上传
imageUpload : true,
imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
imageUploadURL : "/blog/file/upload",
onload : function() {
console.log('markdown编辑器onload初始化：', this);
},
});
});
</script>
</body>
</html>
该使用示例以及 Editor.md 的所有依赖文件已上传分享，在公众号“编程之外”回复关键字 editormd 即可。