推荐一款超赞的 Markdown 在线编辑器组件

npm install editor.md

Bower 安装 :

bower install editor.md

使用

1.增加对应的引用。

<link rel="stylesheet" href="lib/js/editor.md-master/css/editormd.css" />//依赖jquery<script type="text/javascript" src="lib/js/jquery.min.js"></script><script src="lib/js/editor.md-master/editormd.min.js"></script>//需要这三个文件

2.在展现的页面，加上对应 id。

<div id="layout" class="editor">    <div id="test-editormd">        <textarea></textarea>    </div></div>

3.为编辑器设置参数。

var testEditor;testEditor = editormd("test-editormd", {    placeholder:'本编辑器支持Markdown编辑，左边编写，右边预览',  //默认显示的文字，这里就不解释了    width: "90%",    height: 640,    syncScrolling: "single",      path: "lib/js/editor.md-master/lib/",   //你的path路径（原资源文件中lib包在我们项目中所放的位置）    theme: "dark",//工具栏主题    previewTheme: "dark",//预览主题    editorTheme: "pastel-on-dark",//编辑主题    saveHTMLToTextarea: true,    emoji: false,    taskList: true,     tocm: true,         // Using [TOCM]    tex: true,                   // 开启科学公式TeX语言支持，默认关闭    flowChart: true,             // 开启流程图支持，默认关闭    sequenceDiagram: true,       // 开启时序/序列图支持，默认关闭,    toolbarIcons : function() {  //自己设置工具栏，后面有详细详情        return editormd.toolbarModes['simple']; // full, simple, mini        },});

参数可以参考官方文档。通过这些参数，能实现编辑器的工具栏、主题和支持特性的定制。editor.md 支持的定制内容还是非常多样的。

这样即可以在你的网站中，创立出一个 Markdown 在线编辑器。我们还要获取编辑器中的内容，来上传服务器。那就需要下面这个方法。

testEditor.getMarkdown();

getMarkdown() 返回的是使用者输入的 Markdown 文本。

最后

editor.md 还支持将 Markdown 文本直接导出为 Html。但是不支持 Html 导入为 Markdown。

editor.md 项目的发起人是 pandao。项目已经维护五年，共有20位贡献者。editor.md 在 Github 收获了9.6k Star。因为 Markdown 的使用者，主要还是互联网行业的技术人员。所以，editor.md 主要还是程序员们自己折腾自己博客使用。

项目地址： pandao/editor.md