md editor rt

？ MD編輯 - RT

英語| 中文

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

• 文檔和演示：GO

• VUE3的同一系列編輯器：MD編輯-V3

配x功能

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

？預覽

默認主題	黑暗主題	僅預覽

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

？安裝

yarn add md-editor-rt

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

yarn add @vavt/cm-extension

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

yarn add @vavt/v3-extension

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

用法

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

✍？顯示編輯器

 import React , { useState } from 'react' ;
import { MdEditor } from 'md-editor-rt' ;
import 'md-editor-rt/lib/style.css' ;

export default ( ) => {
  const [ text , setText ] = useState ( '# Hello Editor' ) ;
  return < MdEditor modelValue = { text } onChange = { setText } /> ;
} ;

僅預覽

 import React , { useState } from 'react' ;
import { MdPreview , MdCatalog } from 'md-editor-rt' ;
import 'md-editor-rt/lib/preview.css' ;

const scrollElement = document . documentElement ;

export default ( ) => {
  const [ text ] = useState ( '# Hello Editor' ) ;
  const [ id ] = useState ( 'preview-only' ) ;

  return (
    < >
      < MdPreview id = { id } modelValue = { text } />
      < MdCatalog editorId = { id } scrollElement = { scrollElement } />
    </ >
  ) ;
} ;

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

---

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