探究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的使用

大致就是，对比两个字符串，找到两个字符串的不一样，包括多余的，相同的，缺失的。

算法思想贪心，参考以下
英文原版
翻译

个人工做

既然知道了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

git clone https://github.com/moyuyc/markdown-editor.git
cd markdown-editor
npm install
npm start
open http://localhost:9999

最好是在chrome浏览器下使用别忘了给个Star！