md editor rt

? MD-Editor-RT

Anglais | 中文

Éditeur de Markdown pour react , développé dans jsx et typescript .

• Documentation et démo: Allez

• Le même éditeur de série pour Vue3: MD-Editor-V3

️ Caractéristiques

• Barre d'outils, screenfull ou screenfull dans les pages Web, etc.
• Thèmes, thèmes par défaut intégrés et sombres.
• Clé de raccourci pour l'éditeur.
• Embellissez votre contenu par prettier (uniquement pour le contenu Markdown, pas le code et tout autre texte).
• Multiage, accumulation chinois et anglais (par défaut: chinois).
• Téléchargez l'image, collez ou coupez l'image et téléchargez-la.
• Rendre l'article directement (pas d'éditeur, pas d'écouteur d'événements, uniquement du contenu de prévisualisation).
• Thème de l'aperçu, default , vuepress , github , cyanosis , mk-cute , smart-blue Styles (pas identique). Il peut également être personnalisé (reporter à l'exemple de page).
• mermaid (> = 1.3.0), formule mathématique katex （> = 1.4.0）.
• Personnalisez la barre d'outils comme vous le souhaitez.
• Importation à la demande (> = 4.0.0).

? Prévisualisation

Thème par défaut	Thème sombre	Aperçu uniquement

Entrée invite et marque, extensions des emoji

? Installer

yarn add md-editor-rt

Utilisez l'extension existante de la langue et du thème, comme le japonais

yarn add @vavt/cm-extension

Utilisez des composants existants de la barre d'outils, tels que l'exportation du contenu comme PDF

yarn add @vavt/v3-extension

Pour plus de façons d'utiliser ou de contribuer, veuillez vous référer à: MD-Editor-Extension

Usage

À partir de 4.0.0 , les composants internes peuvent être importés à la demande.

✍? Éditeur d'affichage

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

Aperçu uniquement

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

Lorsque vous utilisez le rendu côté serveur, scrollElement doit être de type de chaîne, par exemple: html , body , #id , .class .

---

Pour plus d'utilisation, veuillez visiter le document.