md editor rt

? md-editor-rt

Inglés | 中文

Editor de Markdown para react , desarrollado en jsx y typescript .

• Documentación y demostración: Go

• El mismo editor de la serie para VUE3 ： MD-EDITOR-V3

Min características

• Barra de herramientas, pantalla sesente o pantalla en las páginas web, etc.
• Temas, temas incorporados predeterminados y oscuros.
• Clave de acceso directo para editor.
• Embellece tu contenido de prettier (solo para el contenido de Markdown, no el código y otro texto).
• Multi-lenguaje, construido chino e inglés (predeterminado: chino).
• Cargue una imagen, pegue o recorte la imagen y cárguela.
• Renderizar el artículo directamente (sin editor, sin oyente de eventos, solo una vista previa de contenido).
• Tema de Vista previa, default , vuepress , github , cyanosis , mk-cute , smart-blue Styles (no idéntico). También se puede personalizar (consulte la página de ejemplo).
• mermaid (> = 1.3.0), fórmula matemática katex （> = 1.4.0）.
• Personalice la barra de herramientas como desee.
• Importación a pedido (> = 4.0.0).

? Avance

Tema predeterminado	Tema oscuro	Vista previa solamente

Ingreso de indicadores y mark, extensiones emoji

? Instalar

yarn add md-editor-rt

Use la extensión existente del lenguaje y el tema, como el japonés

yarn add @vavt/cm-extension

Utilice los componentes existentes de la barra de herramientas, como la exportación de contenido como PDF

yarn add @vavt/v3-extension

Para obtener más formas de usar o contribuir, consulte: MD-EDITOR-Extension

Uso

A partir de 4.0.0 , los componentes internos se pueden importar a pedido.

✍? Editor de visualización

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

Vista previa solamente

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

Al usar la representación del lado del servidor, scrollElement debe ser de tipo de cadena, por ejemplo: html , body , #id , .class .

---

Para más uso, visite el documento.