转| 编辑器tui.editor,丰富的Web组件家族TOAST UI

原创 王明昌  2019-07-08 19:35 

介绍

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


强悍的编辑器tui.editor,丰富的Web组件家族TOAST UI

相关地址

Github:

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


官网:

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


API/Demo

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

浏览器兼容性

支持主流的浏览器


强悍的编辑器tui.editor,丰富的Web组件家族TOAST UI

CommonMark+GFM规范

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

强大的扩展

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

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

强悍的编辑器tui.editor,丰富的Web组件家族TOAST UI

特性

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

  • 即时预览模式

强悍的编辑器tui.editor,丰富的Web组件家族TOAST UI

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

  • 简易WYSIWYG模式

强悍的编辑器tui.editor,丰富的Web组件家族TOAST UI

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

  • 更多特性

I18n:

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

Viewer:

使用扩展呈现Markdown内容

安装

  • 包管理


  • 或者


  • cdn

 


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

  • 基本编辑器

强悍的编辑器tui.editor,丰富的Web组件家族TOAST UI

  • 基本预览

强悍的编辑器tui.editor,丰富的Web组件家族TOAST UI

  • UML插件

强悍的编辑器tui.editor,丰富的Web组件家族TOAST UI

  • 图表的扩展

强悍的编辑器tui.editor,丰富的Web组件家族TOAST UI

关于TOAST UI

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

  • Chart

强悍的编辑器tui.editor,丰富的Web组件家族TOAST UI

强悍的编辑器tui.editor,丰富的Web组件家族TOAST UI

强悍的编辑器tui.editor,丰富的Web组件家族TOAST UI

强悍的编辑器tui.editor,丰富的Web组件家族TOAST UI

强悍的编辑器tui.editor,丰富的Web组件家族TOAST UI

强悍的编辑器tui.editor,丰富的Web组件家族TOAST UI

强悍的编辑器tui.editor,丰富的Web组件家族TOAST UI

强悍的编辑器tui.editor,丰富的Web组件家族TOAST UI

强悍的编辑器tui.editor,丰富的Web组件家族TOAST UI

强悍的编辑器tui.editor,丰富的Web组件家族TOAST UI

强悍的编辑器tui.editor,丰富的Web组件家族TOAST UI

强悍的编辑器tui.editor,丰富的Web组件家族TOAST UI

强悍的编辑器tui.editor,丰富的Web组件家族TOAST UI

  • Editor

强悍的编辑器tui.editor,丰富的Web组件家族TOAST UI

  • 表格

强悍的编辑器tui.editor,丰富的Web组件家族TOAST UI

强悍的编辑器tui.editor,丰富的Web组件家族TOAST UI

  • 日历

强悍的编辑器tui.editor,丰富的Web组件家族TOAST UI

  • 图片编辑

强悍的编辑器tui.editor,丰富的Web组件家族TOAST UI

强悍的编辑器tui.editor,丰富的Web组件家族TOAST UI

  • 其它的组件

强悍的编辑器tui.editor,丰富的Web组件家族TOAST UI

强悍的编辑器tui.editor,丰富的Web组件家族TOAST UI

总结

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

本文地址:https://www.wangmingchang.com/4757.html
关注我们:请关注一下我们的微信公众号:扫描二维码王明昌博客的公众号,公众号:wmc365
版权声明:本文为原创文章,版权归 王明昌 所有,欢迎分享本文,转载请保留出处!

发表评论


表情