md editor v3

？ MD-Editor-V3

英語| 中文

VUE3のMarkdownエディターは、 jsxおよびtypescriptで開発されました。

• ドキュメントと例：go

• Reactの同じシリーズエディター：MD-Editor-Rt

§機能

• Webページのツールバー、スクリーンフルまたはスクリーンフルなど。
• テーマ、組み込みのデフォルトおよび暗いテーマ。
• 編集者のショートカットキー。
• prettierにコンテンツを美化します（マークダウンコンテンツのみ、コードやその他のテキストではありません）。
• 多言語、中国語と英語のビルド（デフォルト：中国語）。
• 画像をアップロードし、貼り付け、またはクリップをクリップしてアップロードします。
• 記事を直接レンダリングします（編集者なし、イベントリスナーなし、コンテンツのプレビューのみ）。
• プレビュー、 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 >

サーバー側のレンダリング.class使用する場合、 scrollElement html列型#idある必要がありますbody

---

その他の使用については、ドキュメントをご覧ください。