探究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！