markdown-editor as your wish
SegumentFault 中的Markdown编辑器用户体验不错,比如
为了探究sf实现的原理,在sf中我提出了下面的问题 【segmentfault的实时markdown编辑修改位置定位是怎么做到的,而且效率还不低】
根据采纳答案提供的信息,我搜索到了这段谷歌开源代码 google-diff-match-patch
根据官方的介绍,我们能用这个称为diff-match-path的开源库,进行diff(差异)/match(配对)/patch(补全), 但我们只需要diff功能即可
在官方给出的diff demo中, 通过源码可以很清晰的了解diff的使用
大体就是,对比两个字符串,找到两个字符串的不同,包括多余的,相同的,缺失的。
2016/8/14 更新
其实不需要使用diff_match_patch.js
得到字符串之间所有的差异,我们只需要得到第一个不同的位置即可,所以改进为扫描一遍的方法,求第一个不同的位置,效率更佳
既然知道了sf的实时编辑高亮是基于diff的,那我也基于这个工具实现个markdown编辑器吧。 用了如下第三方库
效果图
具有如下功能:
编辑器部分快捷键说明
其他交互说明:
代码地址 markdown-editor
npm i moyu-markdown-editor -g
md-editor -p 9999
open http://localhost:9999
别忘了给个Star!