介绍

TOAST UI Editor是一个所见即所得的开源编辑器，GFM标准+图表和UML可扩展。它是我目前见过的功能最强大的开源MarkDown编辑器，具备强悍的生产力能力以及丰富的扩展性功能，总之就是一个字——强！

---

---

相关地址

Github：

https://github.com/nhn/tui.editor

---

官网：

https://ui.toast.com/tui-editor/

---

API/Demo

https://nhn.github.io/tui.editor/api/latest/

浏览器兼容性

支持主流的浏览器

---

---

CommonMark+GFM规范

CommonMark是当今的Markdown标准，GWF则是由github风味的另一个标准。

强大的扩展

CommonMark+GFM虽然已经很不错，但我们经常需要更多的抽象。TUSUI编辑器具有强大的扩展，符合Markdown语法。还可以灵活地使用简单的api开发自己的扩展。

• Color picker: 可视化的颜色选择器
• Chart code block:图表的代码块
• UML code block: 标记为“UML”的代码块将呈现UML图
• Table merge: 可以合并表中的列和列
• 等等等

---

---

特性

TUSUI编辑器提供MarkDown模式和所见即所得模式。取决于你想要的使用类型，TUSUI编辑器可能对这两种用法都有帮助。它提供了Markdown模式和WYSIWYG模式，可以在任何时候切换。

• 即时预览模式

---

---

• 实时预览：编辑标记，同时监视呈现的HTML，编辑将立即生效；
• 滚动同步：在Markdown和Preview之间同步滚动；
• 自动缩进：光标将始终在你希望的位置
• 语法突出：你可以立即检查已损坏的Markdown语法

---

• 简易WYSIWYG模式

---

---

• 复制和粘贴：粘贴任何东西从浏览器，屏幕截图，Excel，PowerPoint等。
• 代码块：高亮170+语言与全尺寸的代码编辑器
• 表：讨用鼠标做任何事你想做的

---

• 更多特性

I18n：

英语，荷兰语，韩语，日语，汉语，西班牙语，德语，俄语，法语，乌克兰语，土耳其语，芬兰语，捷克语，阿拉伯语，波兰语，加利西亚语，瑞典语+你自己扩展的语言。

Viewer：

使用扩展呈现Markdown内容

安装

• 包管理

npm install --save tui-editor

---

• 或者

bower install --save tui-editor

---

• cdn

<link rel="stylesheet" href="https://uicdn.toast.com/tui-editor/latest/tui-editor.css"></link>
<link rel="stylesheet" href="https://uicdn.toast.com/tui-editor/latest/tui-editor-contents.css"></link>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.33.0/codemirror.css"></link>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/github.min.css"></link>
<script src="https://uicdn.toast.com/tui-editor/latest/tui-editor-Editor-full.js"></script>

---

由于用法很丰富，具体的请看官网文档API

• 基本编辑器

---

---

• 基本预览

---

---

• UML插件

---

---

• 图表的扩展

---

---

关于TOAST UI

既然介绍了TOAST UI Editor，那么也顺带了解下TOAST UI，TOAST UI Editor只是TOAST UI的一部分，对TOAST UI 感兴趣的可以看看，下面简单看下截图

• Chart

---

---

---

---

---

---

---

---

---

---

---

---

---

---

• Editor

---

---

• 表格

---

---

---

• 日历

---

---

• 图片编辑

---

---

---

• 其它的组件

---

---

---

总结

本文主要介绍的是TOAST UI Editor，但是TOAST UI也是非常值得试一试的，组件丰富，功能完善，兼容性好，我相信，当你使用了它，你会喜欢的！希望对你有所帮助！