探究SegumentFault Markdown编辑器

SegumentFault 中的Markdown编辑器用户体验不错，比如

1. 高亮提示并显示你当前正在编辑的文本
2. 支持剪贴板图片直接粘贴上传，插入图片十分方便
3. 自动保存

为了探究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编辑器吧。 用了如下第三方库

1. ace.js (一个漂亮的编辑器)
2. marked.js (一个markdown文本转html库)
3. highlight.js (将code文本高亮展示)
4. diff_match_patch.js

效果图

具有如下功能：

1. markdown编辑，实时预览
2. 高亮提示并显示你当前正在编辑的文本
3. 支持剪贴板图片直接粘贴上传，插入图片十分方便
4. 自动保存

编辑器部分快捷键说明

1. cmd/ctrl + K : 33种编辑器主题供选择
2. cmd/ctrl + B : 编辑器字体放大
3. cmd/ctrl + M : 编辑器字体缩小
4. cmd/ctrl + U : 自动保存功能开关
5. cmd/ctrl + S : 保存

其他交互说明：

1. 编辑器左下角提示保存信息，右下角提示字数
2. 中部可拖动调节大小
3. 预览可直接复制代码

怎么安装使用？

代码地址
markdown-editor

npm i moyu-markdown-editor -g
md-editor -p 9999
open http://localhost:9999

别忘了给个Star！