Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

はじめに

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

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

en-image.gif

使い方

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

miyarappo
Software Engineer / 浅学ながらマサカリから学ぶために記事を書きます。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした