md editor v3

? MD-Editor-V3

Englisch | 中文

Markdown -Editor für VUE3, entwickelt in jsx und typescript .

• Dokumentation und Beispiel: Go

• Der gleiche Serien-Editor für React: MD-EDITOR-RT

️ Funktionen

• Symbolleiste, Screenfull oder Screenfull in Webseiten usw.
• Themen, eingebaute Standard- und dunkle Themen.
• Kurzschlussschlüssel für den Herausgeber.
• Verschönern Sie Ihren Inhalt mit prettier (nur für Markdown -Inhalte, nicht für den Code und andere Text).
• Multisprachiger, eingebauter Chinesisch und Englisch (Standard: Chinesisch).
• Laden Sie das Bild hoch, fügen Sie das Bild ein oder klappen Sie es hoch und laden Sie es hoch.
• Artikel direkt rendern (kein Editor, kein Event -Listener, nur Vorschau auf Inhalte).
• Thema Vorschau, default , vuepress , github , cyanosis , mk-cute , smart-blue Stile (nicht identisch). Es kann auch angepasst werden (siehe Beispielseite).
• mermaid (> = 1,8.0), katex mathematische Formel (> = 1.9.0).
• Passen Sie die Symbolleiste an, wie Sie möchten.
• On-Demand-Import (> = 4.0.0).

? Vorschau

Standardthema	Dunkles Thema	Nur Vorschau

Eingabeaufforderung und Marke, Emoji -Erweiterungen

? Installieren

yarn add md-editor-v3

Verwenden Sie die vorhandene Erweiterung von Sprache und Thema, wie zum Beispiel Japanisch

yarn add @vavt/cm-extension

Verwenden Sie vorhandene Komponenten der Symbolleiste, z. B. den Exportieren von Inhalten als PDF

yarn add @vavt/v3-extension

Weitere Möglichkeiten, um zu verwenden oder einen Beitrag zu leisten, finden Sie unter: MD-Editor-Extension

Verwendung

Stellen Sie bei der Verwendung von Server-Side-Rendering editorId auf einen konstanten Wert fest.

Ab 4.0.0 können interne Komponenten auf Nachfrage importiert werden.

✍? Editor anzeigen

< 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 >

Nur Vorschau

< 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 >

Bei der Verwendung des serverseitigen Renders sollte scrollElement vom Typ String-Typ sein, z. B. html , body , #id , .class .

---

Weitere Verwendung finden Sie im Dokument.