最初に
本来はReactのHooksについて書こうと思ったのですが，自分の知っている知識だとほとんど既存の記事と被ってしまうので, 今回はハッカソンなどで個人的に愛用している便利なライブラリの紹介をしたいと思います．内部の仕組みなどの高度な話などは全くしていませんので，技術的にエモい内容を期待していた人はごめんなさい．
今回はNitKitコンピュータ研究部が広報の一環としてやっている Advent Calendar 用にこの記事を書きました！
どんなライブラリ?
このような高性能な MarkdownEditor を簡単に実装できるライブラリです．
リンク
導入
自分は 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が表示されます．
この左側にあるエディターにMarkDown記法で文章を入力していくとこんな感じになります．
また，ここに入力した文字列を取得したい場合は， バインディングされている 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>
こうすることで以下のように表示されます．
Mavon-Editor の props の設定でこれを実現しているわけですが， それぞれの props で何をしているのかについて解説します．
<mavon-editor
v-model="value"
:subfield="false"
defaultOpen="preview"
:toolbars="false"
/>
- デフォルトでは「編集画面」と「MardDown」で表示した結果の二つの画面が表示されますが，
:subfieldをfalseに指定することで表示する画面の数は一つになります． -
defaultOpenではメインで表示する画面を選択することができます．デフォルトではマークダウンエディターが表示されますが，今回は文字列をMarkdown記法で読み取った結果のみを表示したいので"preview"を指定しています． - このままだと結局
Markdownの上部にあるツールバーから切り替えができてしまうのでツールバー自体を削除する処理として:toolbars="false"という処理を記載しています．
まとめ
このライブラリは非常に高性能なマークダウンエディターです．
実務で使うのは厳しいかもしれないですが個人開発やコンテストでパパッと作るレベルあれば十分使用を検討するレベルのライブラリと思います．
他にも props をいじることでオリジナルティのあるマークダウンエディタを実装することが可能です．
さらに詳しく知りたい人はここを参考にしてください.
最後に
明日の記事は UIPageViewControllerとボタンを使ったウォークスルーの実装 です！
ぜひこちらもご覧ください！！