md editor rt

? MD-Editor-Rt

Английский | 中文

Редактор Markdown для react , разработанный в jsx и typescript .

• Документация и демонстрация: Go

• Тот же редактор серии для VUE3 ： MD-EDITOR-V3

️ функции

• Панель инструментов, экрана или экрана на веб -страницах и так далее.
• Темы, встроенные по умолчанию и темные темы.
• Комплект ключа для редактора.
• Украшите свой контент prettier (только для содержимого уценки, а не кода и другого текста).
• Многоязычный, встроенный китайский и английский (по умолчанию: китайский).
• Загрузите изображение, вставьте или выключите изображение и загрузите его.
• Рендеринг статьи напрямую (без редактора, без слушателя событий, только предварительный контент).
• Тема предварительного просмотра, default , vuepress , github , cyanosis , mk-cute , smart-blue Styles (не идентичен). Это также можно настроить (см. Пример страницы).
• 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-Editor-Extension

Использование

Начиная с 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 .

---

Для получения дополнительной информации, пожалуйста, посетите документ.