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

Hi！你们好呀！我是大家努力的喵哥！javascript

前段时间，给你们推荐了既见既所得的开源 Markdown 编辑器 Mark Text。Mark Text 是本地软件，内容都是存储在本地的。因此不少朋友就在问，有没有推荐的在线或者能进行云端存储的 Markdown 编辑器。原本是给你们推荐马克飞象的，可是好像不少同窗，如今对国区印象笔记并不太承认。后来，给你们建议直接使用简书之类的，支持 Markdown 的内容平台。可是你们又广泛认为简书的 Markdown 编辑器字体不适合写技术类文章。看来你们的要求还挺高。css

正好这两天，有个小伙伴在找适合博客的富文本插件。对于，技术类文章 Markdown 固然是比富文本更优雅的选择。因此喵哥，就去找了一款 Markdown 编辑器组件，推荐给朋友。朋友使用后，反响不错。因此，这里也推荐给上面那些挑剔的朋友，既然推荐这么多大家都不喜欢，又这么喜欢折腾。那么，本身撸一个如何？前端

固然这是玩笑话。要自建支持 Markdown 的博客，仍是得推荐 Hexo 加 Github Pages 的组合。为何要推荐这款 Markdown 编辑器组件？主要是简单，具备学习价值，还有就是方便你们在设计内容系统时，快速使用。java

这款组件就是 editor.md。editor.md 是一款开源的、可嵌入的 Markdown 在线编辑器组件。editor.md 是基于 CodeMirror、jQuery 和 Marked 构建的。其给个人第一印象是使用简单。做为在线编辑器，简洁明了。做为组件，几行代码便可打造一款在线 Markdown 编辑器。同时，喵哥印象中，国内同类组件中，editor.md 应该是完成度最高，支持内容最广的了。jquery

主要特性git

支持通用 Markdown / CommonMark 和 GFM (GitHub Flavored Markdown) 风格的语法，也可变身为代码编辑器。程序员
支持实时预览、图片（跨域）上传、预格式文本/代码/表格插入、代码折叠、跳转到行、搜索替换、只读模式、自定义样式主题和多语言语法高亮等功能。github
支持 ToC（Table of Contents）、Emoji表情、Task lists、@连接等 Markdown 扩展语法。算法
支持 TeX 科学公式（基于 KaTeX）、流程图 Flowchart 和时序图 Sequence Diagram。npm
支持识别和解析 HTML 标签，而且支持自定义过滤标签及属性解析，具备可靠的安全性和几乎无限的扩展性。
支持 AMD / CMD 模块化加载（支持 Require.js & Sea.js），而且支持自定义扩展插件。
兼容主流的浏览器（IE8+）和 Zepto.js，且支持 iPad 等平板设备。

安装

NPM 安装 :

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 },});