【Vue.js】爆速でリッチなマークダウンエディタをつくれるmavonEditorを使おう

はじめに

Vue.jsでマークダウンエディタをつくる際に、mavonEditorという便利なコンポーネントがあったので紹介します。

以下のようなリッチなマークダウンエディタを簡単につくることが出来ます。
デフォルトの設定でサービスでも使えそうです。

使い方

mavonEditorをインストールします。

$ npm install mavon-editor --save

vue側でimportするだけでマークダウンエディタが出来てしまいます。
簡単すぎて驚きじゃないですか？！

Editor.vue

<template>
  <div id="main">
    <mavon-editor v-model="value" language="en" />
  </div>
</template>

<script>
  import Vue from 'vue'
  import mavonEditor from 'mavon-editor'
  import 'mavon-editor/dist/css/index.css'

  Vue.use(mavonEditor)
    new Vue({
        'el': '#main',
        data() {
            return { value: '' }
        }
    })

</script>

開発者が中国の方のようでデフォルトの設定が中国語となっているのでlanguage="en"のアトリビュートを設定しましょう。すると英語表記になって使い勝手が良くなります。

ツールバーのカスタマイズ

デフォルトだと全てのツールバーメニューが表示される設定になっています。
個人的には多すぎだと感じ、いくつか不要なものを非表示にしました。ツールバーの表示設定は以下のように行います。

Editor.vue

<template>
  <div id="main">
    <mavon-editor v-model="value" language="en" :toolbars="toolbars" />
  </div>
</template>

<script>
  import Vue from 'vue'
  import mavonEditor from 'mavon-editor'
  import 'mavon-editor/dist/css/index.css'

  Vue.use(mavonEditor)
    new Vue({
        'el': '#main',
        data() {
           return { 
             value: '',
             toolbars: {
             bold: true,
             italic: true,
             header: true,
             underline: true,
             strikethrough: true,
             mark: true,
             superscript: true,
             subscript: true,
             quote: true,
             ol: true,
             ul: true,
             link: true,
             imagelink: true,
             code: true,
             table: true,
             help: true,
             alignleft: true,
             aligncenter: true,
             alignright: true,
             subfield: true,
             preview: true,
             // false
             undo: false,
             redo: false,
             fullscreen: false,
             readmodel: false,
             htmlcode: false,
             trash: false,
             save: false,
             navigation: false,
             }
           }
        }
    })

</script>

これだけオプションがあれば大抵の要件は満たせそうですね！

　まとめ

以上、マークダウンエディタを作るのに便利なコンポーネントの紹介でした。
最近Vue.jsを使い始めたのですがとっつきやすくて楽しいです。
コンポーネントも充実しているのでどんどん触りたいですね！

公式のReadme