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

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

最初に

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

今回はNitKitコンピュータ研究部が広報の一環としてやっている Advent Calendar 用にこの記事を書きました!

どんなライブラリ?

このような高性能な MarkdownEditor を簡単に実装できるライブラリです.
スクリーンショット 2019-11-17 22.34.46.png

リンク

導入

自分は yarn 経由で導入しました.

$ yarn add mavon-editor

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

$ npm install mavon-editor --save 

基本的な使用方法

このように適当な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するだけでなく,

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

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

スクリーンショット 2019-11-17 22.09.44.png

この左側にあるエディターにMarkDown記法で文章を入力していくとこんな感じになります.
スクリーンショット 2019-11-17 22.34.46.png

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

「文章をMarkdown形式での表示する」 のみを行う

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

<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>

こうすることで以下のように表示されます.
スクリーンショット 2019-11-17 22.20.00.png

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

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

まとめ

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

最後に

明日の記事は UIPageViewControllerとボタンを使ったウォークスルーの実装 です!
ぜひこちらもご覧ください!!

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
ユーザーは見つかりませんでした