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への接続方法

推薦する

Vue 日付時刻ピッカーコンポーネントの使い方の詳細な説明

この記事の例では、Vue の日付時刻ピッカーコンポーネントの具体的なコードを参考までに紹介します。具...

MySQL 5.7.30 のインストールとアップグレードの問題に関する詳細なチュートリアル

くさびコンピュータにインストールされている MySQL のバージョンが比較的古く、おそらくバージョン...

CentOS 7 で MySQL 5.7 をインストールして設定する

この記事では、以下の環境をテストします。 CentOS 7 64 ビット 最小 MySQL 5.7 ...

MySQL 8.0.13 のインストールと設定方法のグラフィックチュートリアル (Win10 の場合)

MySQL 8.0.13 のインストールと設定方法を皆さんと共有したいと思います。お役に立てれば幸...

Docker Toolboxを完全にアンインストールする方法

Docker Toolbox は、Windows 10 Professional より前のバージョン...

Vue はトークンの有効期限が切れると自動的にログインページにジャンプする機能を実装します

このプロジェクトは最近テストされ、テスターから、トークンの有効期限が切れたため、ルートが自動的にログ...

CSS3はブラウザのスクロールバーのスタイルを変更します

注意: この方法は、Webkit ベースのブラウザにのみ適用されます。ブラウザのスクロールバーが広す...

Docker ベースの Selenium 分散環境の構築

1.画像をダウンロードするdocker pull selenium/hub docker pull ...

ウェブページの読み込み速度を上げる25の方法とヒント

はじめに<br />誰もが高速インターネット接続にアクセスできるわけではありません。たと...

CSSは高さと幅を固定した要素の比例表示効果を実現します

padding-top パーセンテージを使用すると、固定幅と比例した高さの表示を実現できます。現在の...

js タグ構文の使用法の詳細

目次1. ラベルステートメントの紹介2. ラベルステートメントの使用序文:日常の開発では、プログラム...

CSS でベジェ曲線の実装を反転する方法

まずは、以前書いた CSS カルーセルアニメーション効果を見てみましょう。アニメーションの遷移をスム...

MySQLのinnodb_data_file_pathパラメータを変更する際の注意事項

序文innodb_data_file_path は、innodb テーブルスペース ファイルを指定す...

MySQL InnoDB のトランザクション特性を確保するにはどうすればよいですか?

序文「データベース トランザクションの特徴は何ですか?」と尋ねられたら、 ACID 特性である原子性...

入力のsize属性とmaxlength属性の違い

最近、プロジェクトで input size 属性と maxlength 属性を使用しました。以前は、...