?

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

?Markdown

背景

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

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

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

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

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

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

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

特性

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

? 使用場景

• 完整示例
• 如何在 React 中使用
• 如何在 Vue 中使用
• 如何在 Angular 中使用

? 頁面渲染

• 完整示例
• 自定義渲染
• 功能渲染 - Markdown2HTML/大綱/數學公式/腦圖/圖表/流程圖/甘特圖/時序圖/五線譜/多媒體/代碼高亮/代碼復制/graphviz
• 渲染配置 - 錨點/語音閱讀/圖片懶加載/渲染前回調/渲染后回調

??? 基本配置

• 編輯模式 - wysiwyg/ir/sv
• 大小及自適應
• 多語言
• CDN 配置
• 回調事件 - 渲染完成/用戶輸入/聚焦/失焦/選擇文字/ESC/Ctrl+Enter
• 實用小特性 - tab/打字機模式/默認展現大綱/內容為空的提示

? 高級配置

• Markdown 配置 - 自動空格/段落開頭空兩格/矯正術語/矯正標點/啟用目錄/禁用腳注/wysiwyg & ir 模式不渲染代碼塊/解析 settext/不過濾 XSS/主題/為列表添加標記
• 工具欄 - 自定義按鈕/新增按鈕/固定/隱藏
• 文件上傳
• 預覽 - 延遲解析/HTML 字符串處理/DOM 處理/預覽請求
• 自動提示 - 自定義表情/表情圖片地址/表情提示/@ 及其 debounce
• 字數統計 - Markdown/文本/最大字數提示
• 拖拽調整編輯器高度 - 啟用/位于底部/位于頂部/拖拽結束回調
• 代碼塊高亮 - 啟用高亮/代碼塊塊樣式/行號
• 數學公式 - KaTeX，MathJax 引擎切換/設置 MathJax 宏定義/允許 $ 后出現數字
• 本地緩存 - 設置默認值/設置緩存 ID/清除緩存/禁用緩存/啟用緩存/緩存回調

? 基本方法

• 主題修改 - 編輯器/內容/代碼塊渲染/自定義主題
• 文本操作 - 更新內容/插入內容/選中指定內容/更新選中內容/刪除選中內容/設置預覽區域內容
• 獲取 - Markdown/HTML/選中的文本/編輯器模式/光標位置/HTML->Markdown
• 其他方法 - 設置為只讀/聚焦/失焦/消息提示

? 暖心示例

• 移動端最佳配置
• 多個編輯器共存
• 在 sv 模式下點擊工具欄上的格式化可對 Markdwon 原文進行格式化
• 點擊工具欄上的開發者工具可查看 Markdown 語法樹

渲染圖

UXlTi.png

地址

地址：https://www.itnavs.com/navdet/1393.html

vipbic 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的如何允许网页中的编辑器访问剪切板_Vditor下一代的 Markdown 编辑器，为未来而构建...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。