Vue3 でマークダウン エディター コンポーネントを使用する方法

Vue3 でマークダウン エディター コンポーネントを使用する方法

インストール

# 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 の他の関連記事にも注目してください。

以下もご興味があるかもしれません:
  • Electronを使ってMarkdownエディタを簡単に作成する方法
  • Vue を使用してマークダウン エディターのサンプル コードを実装する
  • simplemde を使用して Vue でマークダウン エディターを実装する (画像アップロード機能の追加)
  • Ace をベースにした Markdown エディターを共有する

<<:  MySQL 制約の種類と例

>>:  MySQL可視化ツールNavicatへの接続方法

推薦する

MySQLインデックスベースのストレステストの実装

1. データベースデータをシミュレートする1-1 データベースとテーブルスクリプトを作成する - v...

ESXI の仮想マシンにワークステーションをインストールするときに発生するネットワーク障害の解決策

問題の説明ESXI で Windows にワークステーションをインストールした後、内部の仮想マシンは...

Dockerでランナーコンテナを構成する方法

1. ランナーコンテナを作成する mk@mk-pc:~/Desktop$ docker run -d...

Angularルーティングアニメーションと高度なアニメーション機能の詳細な説明

目次1. ルーティングアニメーション2. グループクエリとスタガー1. ルーティングアニメーションル...

Docker で Python スクリプトを実行する方法

まず、Docker イメージ用の特定のプロジェクト ディレクトリを作成します。例: mkdir /h...

JavaScript ドラッグタイム ドラッグケースの詳細な説明

目次DragEvent インターフェースデータ転送インターフェースの概要DataTransfer の...

MySQL SQL ステートメント分析とクエリ最適化の詳細な説明

パフォーマンスの問題のあるSQL文を取得する方法1. ユーザーからのフィードバックを通じてパフォーマ...

Win10 + Ubuntu 16.04 デュアルシステム 完璧なインストールチュートリアル [詳細]

必ずデータをバックアップすることを忘れないでください。データは貴重なものです! ! !コンピュータモ...

MySQL のフィールドに一意のインデックスを追加および削除する方法

1. PRIMARY KEY(主キーインデックス)を追加するmysql>ALTER TABLE...

MySQL InnoDB ReplicaSet の簡単な紹介

目次01 InnoDBレプリカセットの紹介02 InnoDBレプリカセットの制限03 導入前に知って...

LinuxでVIMエディタを使う方法

豊富なオプションを備えた強力なエディターとして、Vim は多くのユーザーに愛されています。この記事で...

MySQL 8.0.23 のレプリケーション アーキテクチャにおけるスレーブ ノードの自動フェイルオーバー

私はしばらく MGR と連絡を取り合ってきました。MySQL 8.0.23 の登場により、MySQL...

Windows での MySQL のダウンロード、インストール、設定、使用に関するチュートリアル

MySQLの概要MySQL はリレーショナル データベース管理システムです。データベースは構造化され...

XHTML 入門チュートリアル: よく使われる XHTML タグ

<br />記事と同様に、Web ページにも明確な段落と重要度の異なるタイトルが必要です...

jQueryはスライディングタブを実装する

この記事では、スライドタブを実装するためのjQueryの具体的なコードを参考までに紹介します。具体的...