介绍

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

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

  • 基本编辑器


  • 基本预览


  • UML插件


  • 图表的扩展


关于TOAST UI

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

  • Chart














  • Editor


  • 表格



  • 日历


  • 图片编辑



  • 其它的组件



总结

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

编辑器扩展_开发者必备,可扩展编辑器tui.editor和TOAST UI组件家族相关推荐

  1. microbit python扩展_【micro:bit扩展】如何用慧编程扩展设计器为 micro:bit 编写扩展...

    [micro:bit扩展]如何用慧编程扩展设计器为 micro:bit 编写扩展 慧编程-microbit 设备简介 慧编程支持 micro:bit 硬件,打开慧编程,选择硬件栏,点击添加,添加mic ...

  2. joomla tab 扩展_如何使用扩展功能扩展Joomla网站的功能

    joomla tab 扩展 Joomla被独立评论网站CMS Critic评为2018年度最佳免费CMS ,它是全球最受欢迎的网站内容管理系统(CMSes)之一. 与WordPress一样, Joom ...

  3. mysql横向扩展_转mysql横向扩展和纵向扩展

    Scale - up (纵向扩展)和 Scale -out (横向扩展)的解释 谈到系统的可伸缩性, Scale - up (纵向扩展)和 Scale -out (横向扩展)是两个常见的术语,对于初学 ...

  4. 引入antd组件样式_扩大团队技术影响力,搭建团队自己的 UI 组件库

    一.技术栈 我们先简单了解一下要搭建一个团队的 UI 组件库,会涉及到哪些技术栈: Create React App:官方支持的 CLI 脚手架,提供一个零配置的现代构建设置: React: 用于构建 ...

  5. python dash教程_开发者必备神器Dash使用教程

    Dash是什么,为什么说对于开发者是必备工具?今天就让我们一起来认识一下这款程序员必备神器Dash.作为一名死coder,每天最常见的动作就是查看各种API文档,你一定有过同时打开N个窗口(HTML. ...

  6. python深入和扩展_用Python来扩展Postgresql(一)

    本文主要是通过简单的例子演示一下如何在Postgresql里面写Python代码. 1.在Postgresql的机器上安装Python.(这貌似是废话) 2.检查Postgresql的安装目录下面的 ...

  7. idea新建类模板注释设置_开发者必备——IDEA配置清单

    本文主要探讨主流开发工具Intellj IDEA的常用配置及部分插件,供读者参考. 1,常用配置 1.1 配置JDK 1.2 配置自动导包 1.3 配置Maven(内嵌) 配置阿里云镜像加速 Sett ...

  8. 编辑器扩展_关于MediaWiki的编辑器

    如果你是维基百科的新人,那么在尝试编辑维基条目时会发现,系统默认使用的就是可视化编辑器(VisualEditor),它可以令你毫不费力地创建和修改维基条目.即便是你切换到源代码编辑器(WikiEdit ...

  9. html选项卡_适用于Mac的最佳HTML文本编辑器,编码开发必备

    一个好的文本编辑器对于想要建立网站或进行编码的任何人都是必不可少的.这对于习惯于面面俱到的环境的Mac开发人员而言更加明显.对于他们来说存在一系列不同的优质软件之选.今天小编将介绍几款Mac上好用的H ...

最新文章

  1. 利用python把成绩用雷达图表示出来
  2. 寒假每日一题(入门组)【week6 完结】
  3. K8S从懵圈到熟练 - 节点下线姊妹篇
  4. matlab robotics工具箱(3)逆运动学
  5. 【Flink】checkpoint storage at checkckpoint coordinator No route host from xx to xx:9000
  6. pycharm快捷键大全图_十个Pycharm使用小技巧——提升效率
  7. 【从零开始学架构-李运华】开篇词|照着做,你也能成为架构师!
  8. matlab调用第三方api_matlab与外部程序接口调用心得(原创)
  9. GAMES101-现代计算机图形学入门-闫令琪——Lecture 18 Advanced Topics in Rendering 学习笔记
  10. Unity(三)EasyTouch5的使用
  11. 加州ucla 计算机学校,UCLA的Electrical Engineering「加州大学洛杉矶分校电气工程系」...
  12. StackStorm安装WebUI
  13. 商家冷启难题,快手每天8亿流量能解决吗?
  14. python编写背单词程序
  15. 关于树莓派屏幕显示不全的问题
  16. 6.Striped64源码解析
  17. Java部分集合以及部分常用类
  18. 判断极值点是极大值还是极小值
  19. 1.3.9 python中进程与线程
  20. iwrite复制粘贴方法

热门文章

  1. 2种图像增强方法:图像点运算和图像灰度化处理
  2. 只需2步,教你在Vue中设置登录验证拦截
  3. 五一高铁票难抢?用RPA机器人试试!
  4. 24岁的程序员,似乎已经看到了30岁后的自己
  5. MySQL分区表概述
  6. java操作redis并发_使用Redis incr解决并发问题的操作
  7. 红橙Darren视频笔记 UML图简介
  8. Python面向对象编程 __init__方法
  9. php代码实现tp5监听队列,thinkPHP5的队列使用
  10. java awt 边距_Java Swing - 使用Line Border在TextArea上设置边距