探究SegumentFault Markdown编辑器
SegumentFault 中的Markdown编辑器用户体验不错，比如
- 高亮提示并显示你当前正在编辑的文本
- 支持剪贴板图片直接粘贴上传，插入图片十分方便
- 自动保存
为了探究sf实现的原理，在sf中我提出了下面的问题 【segmentfault的实时markdown编辑修改位置定位是怎么做到的，而且效率还不低】
根据采纳答案提供的信息，我搜索到了这段谷歌开源代码 google-diff-match-patch
根据官方的介绍，我们能用这个称为diff-match-path的开源库，进行diff(差异)/match(配对)/patch(补全)， 但我们只需要diff功能即可
在官方给出的diff demo中, 通过源码可以很清晰的了解diff的使用
大体就是，对比两个字符串，找到两个字符串的不同，包括多余的，相同的，缺失的。
我的工作
既然知道了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. 编辑器左下角提示保存信息，右下角提示字数
怎么安装使用？
代码地址
markdown-editor
git clone https://github.com/moyuyc/markdown-editor.git
cd markdown-editor
npm install
npm start
open http://localhost:9999别忘了给个Star！