活字格使用门槛低,可以实现系统的快速成型、高效开发。产品稳定可靠,维护起来也非常容易,能够降低50%的开发成本。低代码开发平台的可拓展性强,能够通过插件机制实现特定功能,非常利于系统的延展和迭代。

——个人开发者 任浩


一、背景介绍

Markdown编辑器使用一套格式标记语言来对文档内容进行排版和格式显示,深受技术人员的喜爱并得到广泛应用,可以用来编写各类的说明文档,例如技术博客。使用Markdown编辑器编写的说明文档可以在很多技术平台进行使用,它能够使得说明部分和代码部分都非常清晰易读。

按照Markdown编辑器的使用环境,通常会被分为三大类:

1、平台集成工具:各大在线博客、社区平台自带的写作工具,比如CSDN、博客园等。

2、独立软件类:可以将该部分软件下载到自己的机器上进行独立使用,用于编辑本地文件,比如MarkdownEditor、Haroopad等。

3、插件类:本身不能被独立使用,但是可以安装到主流的编辑器中,从而使得现有的编辑器具有Markdown的功能。

随着Markdown排版方式的普及,越来越多的应用开始集成Markdown编辑器。目前主流可集成的Markdown编辑器现状分为:仅支持分屏预览,即编辑区和预览区分离;同时支持所见即所得和分屏预览,但所见即所得的模式下不能完整支持Markdown语法排版;几乎没有类似Typora的即时渲染能力。而这三点恰好对应了三种常见的应用场景:

  • 分配预览:适配传统的Markdown使用场景,适合大屏下编辑排版;
  • 所见即所得:对不熟悉Markdown的用户友好,熟悉Markdown的用户也可以无缝使用;
  • 即时渲染:最为优雅的Markdown编辑方式,让熟悉Markdown的用户能够更专注于内容创作。因此,对于一个能够适配应用场景的Markdown编辑器至关重要,它需要考虑到:

1) 传统Markdown用户的使用场景,提供分屏预览的能力

2) 富文本编辑类用户的使用场景,提供所见即所得的能力

3) 高阶Markdown用户的使用场景,提供即时渲染的能力


二、功能介绍

Markdown编辑器(单元格插件)支持活字格V8.0版本,为适配不同的应用场景而生。能够支持三种编辑模式:支持三种编辑模式:所见即所得(wysiwyg)、即时渲染(ir)、分屏预览(sv)。

Markdown编辑器(单元格插件)能够支持大纲、数学公式、脑图、图表、流程图、甘特图、时序图、五线谱、多媒体、语音阅读、标题锚点、代码高亮及复制、graphviz 渲染、plantumlUML图。同时,内置安全过滤、导出、图片懒加载、任务列表、多平台预览、多主题切换、复制到微信公众号/知乎功能。实现了 CommonMark 和 GFM 规范,可对 Markdown 进行格式化和语法树查看,并支持 10+ 项配置。工具栏包含 36+ 项操作,除支持扩展外还可对每一项中的快捷键、提示、提示位置、图标、点击事件、类名、子工具栏进行自定义。除此之外还包含:

  • 表情/at/话题等自动补全扩展
  • 可使用拖拽、剪切板粘贴上传,显示实时上传进度,支持 CORS 跨域上传
  • 实时保存内容,防止意外丢失
  • 录音支持,用户可直接发布语音
  • 粘贴 HTML 自动转换为Markdown,如粘贴中包含外链图片可通过指定接口上传到服务器
  • 支持主窗口大小拖拽、字符计数
  • 多主题支持,内置黑白绿三套主题
  • 多语言支持,内置中、英、韩文本地化
  • 支持主流浏览器,对移动端友好


操作配置及功能说明

Markdown编辑器(单元格插件)可配置的内容包含:

  • 所有CommonMark语法:分隔线、ATX标题、Setext标题、缩进代码块、围栏代码块、HTML块、链接引用定义、段落、块引用、列表、反斜杠转义、HTML实体、行级代码、强调、加粗、链接、图片、行级HTML、硬换行、软换行和纯文本。
  • 所有GFM语法:表格、任务列表项、删除线、自动链接、XSS过滤
  • 常用 Markdown 扩展语法:脚注、ToC、自定义标题 ID
  • 图表语法
  • 通过 Mermaid 支持流程图、时序图、甘特图
  • Graphviz
  • 通过ECharts 支持折线图、饼图、脑图等,
  • 通过 abc.js 支持五线谱
  • 通过 MathJax 和 KaTeX 支持数学公式含数学公式块、行级数学公式
  • YAML Front Matter
  • 中文语境优化
  • 中西文之间插入空格
  • 术语拼写修正
  • 中文后跟英文逗号、句号等标点替换为中文模式
  • 支持暗黑模式
  • 支持隐藏工具栏
  • 支持固定工具栏
  • 支持显示大纲及位置
  • 支持显示字数统计

(运行界面)

(暗黑模式)

(模式预览)

(数学公式)

(脑图)

(流程图)

(甘特图)

(时序图)

(图表)

(五线谱)

(多媒体)