Vditor : 易於使用的 Markdown 編輯器,為適配不同的應用場景而生

74

Vditor是一款瀏覽器端的markd編輯器,支持所見即所得、即時渲染(類似Typora)和分屏預覽模式。它使用TypeScript實現,支持原生JavaScript、Vue、React、Angular,提供桌面版

歡迎到Vditor官方討論區了解更多。同時也歡迎關注B3log開源社區微信公眾號B3log开源

world_map 背景

隨著Markdown 排版方式的普及,越來越多的應用開始集成Markdown 編輯器。目前主流可集成的Markdown 編輯器現狀如下:

  • 有的僅支持分屏預覽,即編輯區和預覽區分離
  • 有的同時支持所見即所得和分屏預覽,但所見即所得模式下不能完整支持Markdown 語法排版
  • 幾乎沒有類似Typora 的即時渲染

而這三點恰好對應了三種應用場景:

  • 分屏預覽:適配傳統的Markdown 使用場景,適合大屏下編輯排版
  • 所見即所得:對不熟悉Markdown 的用戶友好,熟悉Markdown 的用戶也可以無縫使用
  • 即時渲染:理論上這是最為優雅的Markdown 編輯方式,讓熟悉Markdown 的用戶能夠更專注於內容創作

所以,一個能夠適配應用場景的Markdown編輯器至關重要,它需要考慮到:

  • 傳統Markdown 用戶的使用場景,提供分屏預覽
  • 富文本編輯用戶的使用場景,提供所見即所得
  • 高階Markdown 用戶的使用場景,提供即時渲染

Vditor 在這些方面做了努力,希望能為現代化的通用Markdown 編輯領域做出一些貢獻。

sparkles 特性

  • 支持三種編輯模式:所見即所得(wysiwyg)、即時渲染(ir)、分屏預覽(sv)
  • 支持大綱、數學公式、腦圖、圖表、流程圖、甘特圖、時序圖、五線譜、多媒體、語音閱讀、標題錨點、代碼高亮及復制、graphviz渲染
  • 內置安全過濾、導出、圖片懶加載、任務列表、多平台預覽、多主題切換、複製到微信公眾號/知乎功能
  • 實現CommonMark和GFM規範,可對Markdown進行格式化和語法樹查看,並支持10+項配置
  • 工具欄包含36+項操作,除支持擴展外還可對每一項中的快捷鍵、提示、提示位置、圖標、點擊事件、類名、子工具欄進行自定義
  • 表情/at/話題等自動補全擴展
  • 可使用拖拽、剪切板粘貼上傳,顯示實時上傳進度,支持CORS 跨域上傳
  • 實時保存內容,防止意外丟失
  • 錄音支持,用戶可直接發布語音
  • 粘貼HTML 自動轉換為Markdown,如粘貼中包含外鏈圖片可通過指定接口上傳到服務器
  • 支持主窗口大小拖拽、字符計數
  • 多主題支持,內置黑白綠三套主題
  • 多語言支持,內置中、英、韓文本地化
  • 支持主流瀏覽器,對移動端友好


Source https://github.com/Vanessa219/vditor
Comments