md editor v3

？ MD編輯V3

英語| 中文

在jsx和typescript開發的VUE3的Markdown編輯器。

• 文檔和示例：去

• React的同一系列編輯器：MD編輯器RT

配x功能

• 工具欄，屏幕fulll或screenfull在網頁中等等。
• 主題，內置默認設置和黑暗主題。
• 編輯器的快捷鍵。
• 通過prettier美化您的內容（僅用於Markdown內容，而不是代碼和其他文本）。
• 多語言，中文和英語（默認：中文）。
• 上傳圖片，粘貼或剪輯圖片並上傳。
• 直接渲染文章（沒有編輯，沒有事件偵聽器，只能預覽內容）。
• 預覽， default ， vuepress ， github ， cyanosis ， mk-cute ， smart-blue樣式（不相同）的主題。也可以自定義（請參閱示例頁面）。
• mermaid （> = 1.8.0）， katex數學公式（> = 1.9.0）。
• 根據需要自定義工具欄。
• 按需導入（> = 4.0.0）。

？預覽

默認主題	黑暗主題	僅預覽

輸入提示和標記，表情符號擴展

？安裝

yarn add md-editor-v3

使用現有的語言和主題擴展，例如日語

yarn add @vavt/cm-extension

使用工具欄的現有組件，例如將內容導出為PDF

yarn add @vavt/v3-extension

有關使用或貢獻的更多方法，請參閱：MD-編輯 - 擴展

用法

使用服務器端渲染時，請確保將editorId設置為恆定值。

從4.0.0開始，可以按需導入內部組件。

✍？顯示編輯器

< template >
  < MdEditor v-model = " text " />
</ template >

< script setup>
import { ref } from ' vue ' ;
import { MdEditor } from ' md-editor-v3 ' ;
import ' md-editor-v3/lib/style.css ' ;

const text = ref ( ' # Hello Editor ' );
</ script >

僅預覽

< template >
  < MdPreview :id = " id " :modelValue = " text " />
  < MdCatalog :editorId = " id " :scrollElement = " scrollElement " />
</ template >

< script setup>
import { ref } from ' vue ' ;
import { MdPreview , MdCatalog } from ' md-editor-v3 ' ;
import ' md-editor-v3/lib/preview.css ' ;

const id = ' preview-only ' ;
const text = ref ( ' # Hello Editor ' );
const scrollElement = document . documentElement ;
</ script >

使用服務器端渲染時， scrollElement應為字符串類型，例如： html ， body ， #id ， .class 。

---

有關更多用法，請訪問該文件。