背景

相较于HTML富文本编辑而言,Markdown格式简洁轻量,使用越来越普及。虽然Markdown语法简单,但是作为一款通用的开发框架,CabloyJS仍然要考虑到更多实际的终端用户的使用诉求。因此,提供一款Markdown富文本编辑器势在必行

介绍

CabloyJS提供的Markdown富文本编辑器基于ProseMirrorproseMirror 与codeMirror均来自同一个作者Marijn, 而Marijn同时也开发了acorn 解释器。ChromeFirefox自带的调试工具内置了codeMirroracorn则是 babel 的依赖项。由此可见,proseMirror的架构设计和代码质量也是有保证的。proseMirror本身并不是一个开箱即用的编辑器,而是提供了一系列模块组件。基于这些模块组件,就可以像乐高一样搭建出来一个编辑器

CabloyJS基于ProseMirror搭建出来的Markdown富文本编辑器兼顾易用性灵活性一般用户即便不懂Markdown语法也可以无痛的使用,而懂得Markdown语法的专业用户则可以享受更加便捷高效的输入体验

特性

CabloyJS的Markdown富文本编辑器支持以下特性:

  • 所有常见功能,如:撤销、重做、分级标题、加粗、斜体、下划线、删除线、标记、上标、下标、列表,等等

  • 表格

  • 图片上传:支持选择图片上传、复制粘贴图片上传、拖拽图片上传

  • 代码片段:支持所有常见编程语言

  • 任务列表:用于标记待办、已办

  • 源码模式:可以切换到Markdown源码模式

  • 快捷键

  • 脏标记:当有内容变更时显示脏标记

  • Block区块:通过区块机制无限扩展Markdown编辑器的能力

源码

由于Markdown富文本编辑器在CabloyJS中是相对独立的业务模块,大多数场景只需要知道如何使用即可。因此,Markdown富文本编辑器是CabloyJS内置提供并且免费使用的,但其源码版本作为增值模块提供。具体信息,请参见:Cabloy商店:a-markdown