md editor v3

? MD-EDITOR-V3

영어 | 中文

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

• 문서 및 예 : 이동

• React의 동일한 시리즈 편집기 : MD-Editor-Rt

️ 기능

• 웹 페이지 등의 도구 모음, Screenfull 또는 Screenfull 등.
• 테마, 기본 기본 및 어두운 테마.
• 편집기를위한 바로 가기 키.
• prettier (코드 및 기타 텍스트가 아닌 Markdown 컨텐츠에만 해당)에 의해 콘텐츠를 아름답게하십시오.
• 다국어, 중국어 및 영어 구축 (기본값 : 중국어).
• 그림을 업로드, 붙여 넣기 또는 클립하고 업로드하십시오.
• 기사를 직접 렌더링하십시오 (편집기 없음, 이벤트 청취자 없음, 컨텐츠 미리보기).
• 미리보기 테마, default , vuepress , github , cyanosis , mk-cute , smart-blue 스타일 (동일하지 않음). 또한 사용자 정의 할 수 있습니다 (예제 페이지 참조).
• mermaid (> = 1.8.0), katex 수학 공식 (> = 1.9.0).
• 원하는대로 도구 모음을 사용자 정의하십시오.
• 주문형 가져 오기 (> = 4.0.0).

? 시사

기본 테마	어두운 테마	미리보기 전용

입력 프롬프트 및 마크, 이모티콘 확장

? 설치하다

yarn add md-editor-v3

일본어와 같은 기존 언어 및 테마 확장 사용

yarn add @vavt/cm-extension

PDF로 컨텐츠 내보내기와 같은 도구 모음의 기존 구성 요소 사용

yarn add @vavt/v3-extension

더 많은 사용 또는 기여 방법은 다음을 참조하십시오 : MD-Editor-Extension

용법

서버 측 렌더링을 사용하는 경우 editorId 일정한 값으로 설정하십시오.

4.0.0 에서 시작하여 내부 부품을 주문형으로 가져올 수 있습니다.

✍? 디스플레이 편집기

< template >
  < MdEditor v-model = " text " />
</ template >

< script setup>
import { ref } from ' vue ' ;
import { MdEditor } from ' md-editor-v3 ' ;
import ' md-editor-v3/lib/style.css ' ;

const text = ref ( ' # Hello Editor ' );
</ script >

미리보기 전용

< template >
  < MdPreview :id = " id " :modelValue = " text " />
  < MdCatalog :editorId = " id " :scrollElement = " scrollElement " />
</ template >

< script setup>
import { ref } from ' vue ' ;
import { MdPreview , MdCatalog } from ' md-editor-v3 ' ;
import ' md-editor-v3/lib/preview.css ' ;

const id = ' preview-only ' ;
const text = ref ( ' # Hello Editor ' );
const scrollElement = document . documentElement ;
</ script >

서버 측 렌더링을 사용하는 경우 scrollElement html , body , #id , .class 와 같은 문자열 유형이어야합니다.

---

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