インストール# npm の使用 npm を @kangc/v-md-editor@next -S にコピーします。 # 糸を使う 糸を追加 @kangc/v-md-editor@next コンポーネントのインポート'vue' から creatApp をインポートします。 '@kangc/v-md-editor' から VMdEditor をインポートします。 '@kangc/v-md-editor/lib/style/base-editor.css' をインポートします。 '@kangc/v-md-editor/lib/theme/github.js' から githubTheme をインポートします。 '@kangc/v-md-editor/lib/theme/style/github.css' をインポートします。 VMdEditor.use(githubTheme); const app = creatApp(/*...*/); app.use(VMdEditor); 基本的な使い方<テンプレート> <v-md-editor v-model="text" height="400px"></v-md-editor> </テンプレート> <スクリプト> 'vue' から { ref } をインポートします。 エクスポートデフォルト{ 設定 () { 定数テキスト = ref(''); 戻る { 文章 } } } </スクリプト> 保存したマークダウンまたは HTML テキストをページ上にレンダリングするにはどうすればよいですか?1. 保存したマークダウンテキストをレンダリングする 方法 1: プロジェクトにエディターを導入している場合。エディターのプレビュー モードを使用して直接レンダリングできます。例えば <テンプレート> <v-md-editor :value="マークダウン" モード="プレビュー"></v-md-editor> </テンプレート> <スクリプト> 'vue' から { ref } をインポートします。 エクスポートデフォルト{ 設定 () { const マークダウン = ref(''); 戻る { マークダウン } } } </スクリプト> 方法 2: プロジェクトで編集機能を必要とせず、マークダウン テキストのレンダリングのみが必要な場合は、レンダリング用にプレビュー コンポーネントのみを導入できます。例えば // メイン.js 'vue' から creatApp をインポートします。 '@kangc/v-md-editor/lib/preview' から VMdPreview をインポートします。 '@kangc/v-md-editor/lib/style/preview.css' をインポートします。 // 使用しているテーマをインポートします。ここでは、github テーマを例に挙げます。import githubTheme from '@kangc/v-md-editor/lib/theme/github'; '@kangc/v-md-editor/lib/theme/style/github.css' をインポートします。 VMdPreview.use(githubTheme); const app = creatApp(/*...*/); app.use(VMdPreview); <テンプレート> <v-md-preview :text="マークダウン"></v-md-preview> </テンプレート> <スクリプト> 'vue' から { ref } をインポートします。 エクスポートデフォルト{ 設定 () { const マークダウン = ref(''); 戻る { マークダウン } } } </スクリプト> 2. 保存したHTMLテキストをレンダリングする プロジェクトに編集機能が不要で、HTML のレンダリングのみが必要な場合は、レンダリング用に preview-html コンポーネントをインポートするだけで済みます。例えば: // メイン.js 'vue' から creatApp をインポートします。 '@kangc/v-md-editor/lib/preview-html' から VMdPreviewHtml をインポートします。 '@kangc/v-md-editor/lib/style/preview-html.css' をインポートします。 // テーマのスタイルをインポートします。 import '@kangc/v-md-editor/lib/theme/style/vuepress'; const app = creatApp(/*...*/); app.use(VMdPreviewHtml); <テンプレート> <!-- preview-class はテーマのスタイル クラス名です。たとえば、vuepress の場合は vuepress-markdown-body です --> <v-md-preview-html :html="html" プレビュークラス="vuepress-markdown-body"></v-md-preview-html> </テンプレート> <スクリプト> 'vue' から { ref } をインポートします。 エクスポートデフォルト{ 設定 () { const html = ref('<div data-v-md-line="1"><h1 align="center">Vue 上に構築された Markdown エディター</h1>'); 戻る { html } }, }; </スクリプト> より高度な使用方法については、公式ドキュメントを参照してください: v-md-editor 以上が、Vue3 でのマークダウン エディター コンポーネントの使用方法の詳細です。Vue3 でのマークダウン エディター コンポーネントの使用方法の詳細については、123WORDPRESS.COM の他の関連記事にも注目してください。 以下もご興味があるかもしれません:
|
1. データベースデータをシミュレートする1-1 データベースとテーブルスクリプトを作成する - v...
問題の説明ESXI で Windows にワークステーションをインストールした後、内部の仮想マシンは...
1. ランナーコンテナを作成する mk@mk-pc:~/Desktop$ docker run -d...
目次1. ルーティングアニメーション2. グループクエリとスタガー1. ルーティングアニメーションル...
まず、Docker イメージ用の特定のプロジェクト ディレクトリを作成します。例: mkdir /h...
目次DragEvent インターフェースデータ転送インターフェースの概要DataTransfer の...
パフォーマンスの問題のあるSQL文を取得する方法1. ユーザーからのフィードバックを通じてパフォーマ...
必ずデータをバックアップすることを忘れないでください。データは貴重なものです! ! !コンピュータモ...
1. PRIMARY KEY(主キーインデックス)を追加するmysql>ALTER TABLE...
目次01 InnoDBレプリカセットの紹介02 InnoDBレプリカセットの制限03 導入前に知って...
豊富なオプションを備えた強力なエディターとして、Vim は多くのユーザーに愛されています。この記事で...
私はしばらく MGR と連絡を取り合ってきました。MySQL 8.0.23 の登場により、MySQL...
MySQLの概要MySQL はリレーショナル データベース管理システムです。データベースは構造化され...
<br />記事と同様に、Web ページにも明確な段落と重要度の異なるタイトルが必要です...
この記事では、スライドタブを実装するためのjQueryの具体的なコードを参考までに紹介します。具体的...