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

以下もご興味があるかもしれません: