md editor rt

? MD-Editor-rt

Inglês | 中文

Editor de Markdown do react , desenvolvido em jsx e typescript .

• Documentação e demonstração: Vá

• O mesmo editor da série para Vue3: MD-Editor-V3

️ Recursos

• Barra de ferramentas, Screenfull ou Screenfull em páginas da web e assim por diante.
• Temas, temas inadimplentes e escuros embutidos.
• Chave de atalho para editor.
• Embeleza seu conteúdo por prettier (apenas para o conteúdo de marcação, não pelo código e outro texto).
• Multi-idioma, de construção chinesa e inglesa (padrão: chinês).
• Faça upload de imagem, cole ou prenda a imagem e faça o upload.
• Renderize o artigo diretamente (nenhum editor, nenhum ouvinte de eventos, apenas o conteúdo de visualização).
• Tema de pré-visualização, default , vuepress , github , cyanosis , estilos de smart-blue mk-cute , mk (não idênticos). Também pode ser personalizado (consulte a página de exemplo).
• mermaid (> = 1.3.0), fórmula matemática katex （> = 1.4.0).
• Personalize a barra de ferramentas como você quiser.
• Importação sob demanda (> = 4.0.0).

? Visualização

Tema padrão	Tema sombrio	Apenas visualização

Prompt de entrada e marca, extensões emoji

? Instalar

yarn add md-editor-rt

Use a extensão existente de linguagem e tema, como o japonês

yarn add @vavt/cm-extension

Use componentes existentes da barra de ferramentas, como exportar conteúdo como PDF

yarn add @vavt/v3-extension

Para mais maneiras de usar ou contribuir, consulte: MD-Editor-Extensão

Uso

A partir de 4.0.0 , componentes internos podem ser importados sob demanda.

✍? Editor de exibição

 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 } /> ;
} ;

Apenas visualização

 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 } />
    </ >
  ) ;
} ;

Ao usar a renderização do lado do servidor, scrollElement deve ser do tipo string, por exemplo: html , body , #id , .class .

---

Para mais uso, visite o documento.