Vue.js で高性能な MarkdownEditor を簡単に実装する【mavonEditor】

## 最初に
本来はReactのHooksについて書こうと思ったのですが，自分の知っている知識だとほとんど既存の記事と被ってしまうので, 今回はハッカソンなどで個人的に愛用している便利なライブラリの紹介をしたいと思います．内部の仕組みなどの高度な話などは全くしていませんので，技術的にエモい内容を期待していた人はごめんなさい．

今回は[NitKitコンピュータ研究部](https://tomy.hatenablog.jp/entry/2018/12/09/000000)が広報の一環としてやっている `Advent Calendar` 用にこの記事を書きました！

## どんなライブラリ?
このような高性能な `MarkdownEditor` を簡単に実装できるライブラリです．
<img width="1680" alt="スクリーンショット 2019-11-17 22.34.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274950/c9a19577-cec7-2c7a-73e1-2dbe13a5238a.png">

## リンク
- [英語ドキュメント](https://github.com/hinesboy/mavonEditor/blob/HEAD/README-EN.md)
- [中国語ドキュメント](https://www.npmjs.com/package/mavon-editor?activeTab=readme)

## 導入
自分は `yarn` 経由で導入しました．

```console
$ yarn add mavon-editor
```

`npm` で入れる場合はこちらです．

```console
$ npm install mavon-editor --save 
```


## 基本的な使用方法
このように適当な`vue`ファイルに記載すれば動きます．

```vue
<template>
  <div id="app">
    <mavon-editor v-model="value" />
  </div>
</template>

<script>
import Vue from "vue";
import mavonEditor from "mavon-editor";
import "mavon-editor/dist/css/index.css";
Vue.use(mavonEditor);

export default {
  data() {
    return { value: "" }; 
  }
};
</script>
```

導入で特別難しい箇所は存在しませんが，注意点として普通のライブラリと違って`import`するだけでなく，

```js
import Vue from "vue";
import mavonEditor from "mavon-editor";
import "mavon-editor/dist/css/index.css";
Vue.use(mavonEditor);
```

を全て記載しないと `mavon-editor` が読み込まれないようのでご注意ください．
これを実装すると以下の画像のような`MarkdownEditor`が表示されます．

<img width="1680" alt="スクリーンショット 2019-11-17 22.09.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274950/d1251ef5-f901-dbfe-6866-97ccc9c2df09.png">

この左側にあるエディターに`MarkDown`記法で文章を入力していくとこんな感じになります．
<img width="1680" alt="スクリーンショット 2019-11-17 22.34.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274950/c9a19577-cec7-2c7a-73e1-2dbe13a5238a.png">

また，ここに入力した文字列を取得したい場合は， バインディングされている `value` の値を参照する事で可能です．

## 「文章をMarkdown形式での表示する」 のみを行う
`MarkdownEditor` としてではなく任意の文字列を `Markdown` として読み取り, その表示のみを行いたいという場合もあると思います．
その場合は以下のように書くことで作成することが可能です．

```vue
<template>
  <div id="app">
    <mavon-editor
      v-model="value"
      language="ja"
      :subfield="false"
      defaultOpen="preview"
      :toolbars="false"
    />
  </div>
</template>

<script>
import Vue from "vue";
import mavonEditor from "mavon-editor";
import "mavon-editor/dist/css/index.css";
Vue.use(mavonEditor);

export default {
  data() {
    return { value: "# test \n こん感じで `MarkDown` も書けます．\n\n $$ \n f(x) = a_xb_x \n $$ \n" }; 
  }
};
</script>
```

こうすることで以下のように表示されます．
<img width="1679" alt="スクリーンショット 2019-11-17 22.20.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274950/ddd7c321-986c-b84b-5323-1586bc4b1b0f.png">

`Mavon-Editor` の props の設定でこれを実現しているわけですが， それぞれの props で何をしているのかについて解説します．


```html
    <mavon-editor
      v-model="value"
      :subfield="false"
      defaultOpen="preview"
      :toolbars="false"
    />
```

- デフォルトでは「編集画面」と「MardDown」で表示した結果の二つの画面が表示されますが，`:subfield` を `false` に指定することで表示する画面の数は一つになります．
- `defaultOpen` ではメインで表示する画面を選択することができます．デフォルトではマークダウンエディターが表示されますが，今回は文字列を`Markdown`記法で読み取った結果のみを表示したいので `"preview"` を指定しています．
- このままだと結局 `Markdown`　の上部にあるツールバーから切り替えができてしまうのでツールバー自体を削除する処理として `:toolbars="false"` という処理を記載しています．

## まとめ
このライブラリは非常に高性能なマークダウンエディターです．
実務で使うのは厳しいかもしれないですが個人開発やコンテストでパパッと作るレベルあれば十分使用を検討するレベルのライブラリと思います．
他にも props をいじることでオリジナルティのあるマークダウンエディタを実装することが可能です．
さらに詳しく知りたい人は[ここを参考にしてください](https://github.com/hinesboy/mavonEditor/blob/HEAD/README-EN.md).

## 最後に
明日の記事は [UIPageViewControllerとボタンを使ったウォークスルーの実装](https://qiita.com/tessy0901/items/473f557c2f433ec89909) です！
ぜひこちらもご覧ください！！