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 。

---

有关更多用法，请访问该文件。