Vditor : 易於使用的 Markdown 編輯器,為適配不同的應用場景而生
Vditor是一款瀏覽器端的markd編輯器,支持所見即所得、即時渲染(類似Typora)和分屏預覽模式。它使用TypeScript實現,支持原生JavaScript、Vue、React、Angular,提供桌面版。
歡迎到Vditor官方討論區了解更多。同時也歡迎關注B3log開源社區微信公眾號B3log开源
:
背景
隨著Markdown 排版方式的普及,越來越多的應用開始集成Markdown 編輯器。目前主流可集成的Markdown 編輯器現狀如下:
- 有的僅支持分屏預覽,即編輯區和預覽區分離
- 有的同時支持所見即所得和分屏預覽,但所見即所得模式下不能完整支持Markdown 語法排版
- 幾乎沒有類似Typora 的即時渲染
而這三點恰好對應了三種應用場景:
- 分屏預覽:適配傳統的Markdown 使用場景,適合大屏下編輯排版
- 所見即所得:對不熟悉Markdown 的用戶友好,熟悉Markdown 的用戶也可以無縫使用
- 即時渲染:理論上這是最為優雅的Markdown 編輯方式,讓熟悉Markdown 的用戶能夠更專注於內容創作
所以,一個能夠適配應用場景的Markdown編輯器至關重要,它需要考慮到:
- 傳統Markdown 用戶的使用場景,提供分屏預覽
- 富文本編輯用戶的使用場景,提供所見即所得
- 高階Markdown 用戶的使用場景,提供即時渲染
Vditor 在這些方面做了努力,希望能為現代化的通用Markdown 編輯領域做出一些貢獻。
特性
- 支持三種編輯模式:所見即所得(wysiwyg)、即時渲染(ir)、分屏預覽(sv)
- 支持大綱、數學公式、腦圖、圖表、流程圖、甘特圖、時序圖、五線譜、多媒體、語音閱讀、標題錨點、代碼高亮及復制、graphviz渲染
- 內置安全過濾、導出、圖片懶加載、任務列表、多平台預覽、多主題切換、複製到微信公眾號/知乎功能
- 實現CommonMark和GFM規範,可對Markdown進行格式化和語法樹查看,並支持10+項配置
- 工具欄包含36+項操作,除支持擴展外還可對每一項中的快捷鍵、提示、提示位置、圖標、點擊事件、類名、子工具欄進行自定義
- 表情/at/話題等自動補全擴展
- 可使用拖拽、剪切板粘貼上傳,顯示實時上傳進度,支持CORS 跨域上傳
- 實時保存內容,防止意外丟失
- 錄音支持,用戶可直接發布語音
- 粘貼HTML 自動轉換為Markdown,如粘貼中包含外鏈圖片可通過指定接口上傳到服務器
- 支持主窗口大小拖拽、字符計數
- 多主題支持,內置黑白綠三套主題
- 多語言支持,內置中、英、韓文本地化
- 支持主流瀏覽器,對移動端友好