关注公众号 “OpenSourceDaily” ，每天推荐给你优秀开源项目
大家好，我是欧盆索思（opensource），每天为你带来优秀的开源项目！
今天这个项目，对于那些站长可能比较有用，虽然你现在不是站长，说不定什么时候就需要呢，收藏一个先？！
Toast UI Editor 是一个 Markdown 所见即所得编辑器，支持 GFM 标准、图表和 UML 等扩展。项目地址：https://github.com/nhn/tui.editor，目前 Star 数 10.9k+，官方首页：http://ui.toast.com/tui-editor，同时还有文档和例子：https://nhn.github.io/tui.editor/latest/。
官方提供了一个动图：
支持 Excel 复制和图表，看起来很强大。
包装
该库一方面支持原生的纯 JavaScript，也提供了 jQuery、React 和 Vue 的包装，具体如下：
- `@toast-ui/editor`[1]
- `@toast-ui/jquery-editor`[2]
- `@toast-ui/react-editor`[3]
- `@toast-ui/vue-editor`[4]
此外，该库额外的功能通过扩展来实现，提供的扩展有：
- `@toast-ui/editor-plugin-chart`[5]：支持图表
- `@toast-ui/editor-plugin-code-syntax-highlight`[6]：语法高亮
- `@toast-ui/editor-plugin-color-syntax`[7]：文本颜色
- `@toast-ui/editor-plugin-table-merged-cell`[8]：合并表格列
- `@toast-ui/editor-plugin-uml`[9]：支持 UML
为什么选择 Toast UI Editor
因为 Markdown 的流行，相关的编辑器很多。对于电脑本地使用，我强烈推荐 Typora，我现在写该文就是用的它。而 Toast UI Editor 一定程度上有点类似 Typora 的体验，它同时支持 Markdown 和 WYSIWYG 两种模式，用户可以自由切换。
目前，Markdown 存在两种规范：_CommonMark_[10] 和 _GFM_[11]，该编辑器同时支持这两种规范，除此之外，还有如下好处：
- 实时预览。编辑 Markdown 的同时呈现出 HTML。你的修改会立即被渲染。
- 同步滚动。在 Markdown 和 Preview 之间同步滚动。
- 自动缩进。光标将始终在你想要的位置。
- 语法高亮。你可以立即检查不对的 Markdown 语法。
- 表格。在所见即所得模式下，通过表格的上下文菜单，可以添加或删除表的列或行，还可以在单元格中排列文本。
- 代码块。在所见即所得模式下，可以通过图层弹出编辑器编辑代码块区域。
- 复制粘贴。可以从浏览器、屏幕截图、Excel、PowerPoin t 等中的任何内容复制粘贴。这个真的很强大，Typora 就提供了类似的功能，也是我很喜欢的最主要原因之一。
- 提供了工具栏，方便进行操作。
另外，上文也提到了，该编辑器还提供了其他的扩展，这些扩展并没有在上面提到的两种规范中。
除了编辑器功能，Toast UI Editor 还提供了 Viewer 模式，即只是渲染 Markdown，而且它还提供了国际化（比如对工具栏提示的国际化），不过这个我认为没多大必要。
示例和 API
一个项目好不好，看看文档和示例怎么样。该项目的文档和示例很全：https://nhn.github.io/tui.editor/latest/。在使用该项目过程中遇到任何问题或需求，这些示例和 API 是一个很好的参考资源，同时还可以在 GitHub issue 中进行搜索。
浏览器支持
该库对浏览器的支持很好，IE 支持 10+，其他浏览器都支持。
具体简单使用
了解了上面的内容后，我们具体使用下。
现在的前端项目，一般推荐通过 npm 来安装使用。因为我们这里主要是讲解服务端，前端我们选择 Browser 的形式安装，即直接引用 CDN 或下载对应的 JS 和 CSS。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Markdown编辑器</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.min.css" />
<link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/styles/github.min.css" />
</head>
<body>
<div>
<div id="editor"></div>
<button id="publish-article">保存</button>
</div>
<script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
<script src="https://uicdn.toast.com/editor-plugin-code-syntax-highlight/latest/toastui-editor-plugin-code-syntax-highlight-all.min.js"></script>
<script type="application/javascript">
const { Editor } = toastui;
const { codeSyntaxHighlight } = Editor.plugin;
const editor = new Editor({
el: document.querySelector('#editor'),
previewStyle: 'vertical',
height: 'auto',
minHeight: '500px',
usageStatistics: false,
initialValue: '',
plugins: [codeSyntaxHighlight],
hooks: {}
});
</script>
</body>
</html>
- toastui.Editor 是该库的核心类；
- 实例化该类时，提供了相关的选项，这些选项的含义可以在 https://nhn.github.io/tui.editor/latest/ToastUIEditor 中找到；
参考资料
[1]
@toast-ui/editor: https://github.com/nhn/tui.editor/tree/master/apps/editor
[2]
@toast-ui/jquery-editor: https://github.com/nhn/tui.editor/tree/master/apps/jquery-editor
[3]
@toast-ui/react-editor: https://github.com/nhn/tui.editor/tree/master/apps/react-editor
[4]
@toast-ui/vue-editor: https://github.com/nhn/tui.editor/tree/master/apps/vue-editor
[5]
@toast-ui/editor-plugin-chart: https://github.com/nhn/tui.editor/tree/master/plugins/chart
[6]
@toast-ui/editor-plugin-code-syntax-highlight: https://github.com/nhn/tui.editor/tree/master/plugins/code-syntax-highlight
[7]
@toast-ui/editor-plugin-color-syntax: https://github.com/nhn/tui.editor/tree/master/plugins/color-syntax
[8]
@toast-ui/editor-plugin-table-merged-cell: https://github.com/nhn/tui.editor/tree/master/plugins/table-merged-cell
[9]
@toast-ui/editor-plugin-uml: https://github.com/nhn/tui.editor/tree/master/plugins/uml
[10]
CommonMark: http://commonmark.org/
[11]
GFM: https://github.github.com/gfm/
今天的项目大家觉得怎么样吗？如果你喜欢，请在文章底部留言、点赞或关注转发，你的支持就是我持续更新的最大动力！