Nuxt.js mavon-editorを利用してマークダウンエディタを構築する

Nuxt.js mavon-editorを利用してマークダウンエディタを構築する

mavon-editorをインストールして、マークダウンエディタの構築手順となります。簡単に構築でき、使いやすいので非常に便利です。

環境

  • OS  ubuntu19.10
  • node v12.13.0
  • npm 6.12.1
  • Nuxt.js v2.10.2

Nuxt.jsはnpx create-nuxt-appでインストールしてます。

mavon-editorインストール

下記のコマンドでインストールします。

mavon-editor利用

mavon-editorを利用するためのソースコードとなります。

plugins配下にvue-mavon-editor.jsという名前でファイルを作成し、下記のコードを記述します。

プロジェクト配下のnuxt.config.jsに下記のコードを追加します。

pages配下にmarkdown.vue という名前でファイルを作成し、下記のコードを記述します。

ブラウザから http://プライベートIP:3000/markdownにアクセスするとMarkdownエディタが表示されます。