瀏覽器端 Markdown 編輯器 Vditor 宣佈開源
下一代的 Markdown 編輯器,為未來而構建
簡介
Vditor 是一款瀏覽器端的 Markdown 編輯器,使用 TypeScript 實現。
背景
我們在開發 Sym 的初期是直接使用 WYSIWYG 富文字編輯器的。那時候基於 HTML 的編輯器非常流行,專案中引用起來也很方便,也符合使用者當時的使用習慣。
後來,Markdown 的崛起逐步改變了大家的排版方式。再加上我們其他幾個專案都是面向程式設計師使用者的,所以遷移到 md 上也是大勢所趨。我們選擇了 CodeMirror,這是一款優秀的編輯器,它對開發者提供了豐富的程式設計介面,對各種瀏覽器的相容性也比較好。
再後來,隨著我們專案業務需求方面的沉澱,使用 CodeMirror 有時候會感到比較“笨重”。比如要實現 @自動完成使用者名稱列表、插入 Emoji、上傳檔案等就需要比較深入的二次開發,而這些業務需求恰恰是很多專案場景共有且必備的。
終於,我們決定開始在 Sym 中自己實現編輯器。隨著幾個版本的迭代,Sym 的編輯器也日趨成熟。在我們運營的社群黑客派上陸續有人問我們是否能將編輯器單獨抽離出來提供給大家使用。與此同時,我們的前端主程 V 同學對於維護分散在各個專案中的編輯器也感到有點力不從心,外加她最近在學 TypeScript 正好需要練手實踐,所以就決定使用 ts 來實現一個全新的瀏覽器端 md 編輯器。
於是,Vditor 就這樣誕生了。
功能
-
插入原生 Emoji、設定常用表情列表
-
自定義工具欄按鈕、提示、插入文案及快捷鍵
-
可使用拖拽、剪下板貼上上傳,顯示實時上傳進度
-
支援 CORS 跨域上傳
-
內容儲存本地儲存,防止意外丟失
-
錄音支援,使用者可直接釋出語音
-
貼上 HTML 自動轉換為 Markdown
-
提供實時預覽、滾動同步定位
-
支援主視窗大小拖拽、字元計數
-
多主題支援、內建黑白兩套
-
多語言支援、內建中英文
-
支援主流瀏覽器和移動端
案例
文件
授權
Vditor 使用 MIT 開源協議。
社群
鳴謝
-
Markdown :輕量級純文字排版語言
-
TypeScript :型別化的 JavaScript 超集
-
Turndown :HTML 到 Markdown 的轉換器
-
RecordRTC :多媒體錄製庫