md editor rt

? MD-Editor-Rt

영어 | 中文

jsx 및 typescript 에서 개발 된 react 의 Markdown 편집기.

• 문서화 및 데모 ： 이동

• vue3의 동일한 시리즈 편집기 ： MD-Editor-v3

️ 기능

• 웹 페이지 등의 도구 모음, Screenfull 또는 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-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 와 같은 문자열 유형이어야합니다.

---

자세한 내용은 문서를 방문하십시오.