制作一个实时渲染的markdown编辑器YaliEditor

制作一个实时渲染的markdown编辑器YaliEditor

开源项目地址

WenyaoL/YaliEditor: 一个简易的实时渲染markdown编辑器 (github.com)

一个简易的实时渲染markdown编辑器，可以及时渲染mardown。

IR模式实时渲染

渲染

IR模式实时渲染通过markdown-it库对markdown原生语法进行渲染，渲染的格式通过编写markdown-it的插件进行自定义

插件存放在markdown-it-plugin目录下集中管理。

• 目录渲染的插件使用的是markdown-it-toc-beautiful，目录渲染的主要通过读取上下文中的目录结构进行自定义。
• 渲染表格的插件存放在markdown-it-table-beautiful，通过markdown-it-table-beautiful插件对表格的渲染进行自定义渲染
• 渲染List的插件存放在markdown-it-list-beautiful
• 等等

解析

使用turndown作为markdown的解析器，turndown的回将html元素转为为markdown字符串，在turndown-plugin文件夹中，保存着对turndown的初始化规则定义。

节点监控

对于节点的监控使用的是MutationObserver，对节点的变化进行监控，当节点发送变化时，对通知undoSystem去对节点进行复制并将改变记录下来。

undo System

undo System通过使用diff_match_patch，将节点的变化转化为文本的修改进行记录，当用户触发undo操作时，对拿出修改记录，通过修改记录重新构建。

而redo操作则是通过对undo记录的反做，对页面进行重做操作

渲染效果

渲染结果如下：

目录预览效果

字体颜色的修改

后面会更新，对软件的风格系统进行实装。