超簡単!! Vue.js で Markdown エディタを作ろう

phi phi on vue.js

前回に引続き Vue.js についてのエントリーです. Vue.js で簡単な Markdown エディタを作ってみました.
公式のサンプルをちょっとイジっただけですが...

Runstant で作ってあるので実際に動かしたりコードを書き換えて試せます.

Runstant

今回作ったでもサンプルです.

左側に markdown を書くとリアルタイムで右側に反映されていくのが分かるかと思います.

Flow

1. Vue.js と marked.js を読み込む

必要なライブラリを読み込みます.

Vue.js はコアとなるデータバインディングに,
marked.js は markdown を html に変換するのに使います.

それぞれ cdnjs から読み込んでいます.

<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.10/vue.js'></script>  
<script src='https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.js'></script>  

runstant

2. エディタとプレビュー画面を作ろう

step02

html を書いていきます.

<body>  
  <div id='editor'>
    <textarea id='input' v-model='input' debounce='100'></textarea>
    <div id='output' v-html='input | marked'></div>
  </div>
</body>  

たったこれだけです.

input, #output がそれぞれエディタ, プレビューになります.

各属性は, Vue.js 用のものでそれぞれの解説はこちらになります.

  • v-model ... これはモデルとして登録するための属性です. 値がそのままモデルのキーになります.
  • debounce ... キーストロークの遅延時間を設定します. 重いような処理の場合はこの値を大きくして頻度を減らすなどの対応ができます.
  • v-html ... 値の内容を html として展開してくれます.

runstant

3. Vue.js でデータバインディング 

step03

JavaScript 側の実装をしていきます.

window.onload = function() {  
  new Vue({
    el: '#editor',
    data: {
      input: '# Hello, Vue.js\n\n- hoge\n- foo\n- bar',
    },
    filters: {
      marked: marked,
    },
  });
};

js 側も非常にシンプルです.

data 側には html 側にモデルとして設定した input を書くことでデフォルト値を設定しています.

filter には markdown 用の変換フィルタを登録しています.
markded.js の marked() というメソッドがそのまま変換の役割を持っているので marked:marked で ok です.

これで html 側の output に指定していた v-html="input | marked" が有効になり, input の値を markdown -> html に変換し html のまま #output に展開してくれるようになります.

これでほぼほぼエディタの機能としては完成です.

runstant

4. CSS で見た目を整えよう

step04

見た目がちょっと...ですよね. CSS でスタイリングしていきましょう.

#input, #output {
  display: block;
  position: absolute;
  top: 0px;
  width: 50vw;
  height: 100vh;
  padding: 20px;
  outline: none;
  border: none;
}

#input {
  left: 0px;
  border-right: 1px solid #eee;
}
#output {
  right: 0px;
}

ul {  
  padding: 1rem;
  margin: 1rem;
}

まず, #input, #output それぞれに position: absolute を指定することで絶対座標指定にします.

次に width:50vw, height:100vh とすることで それぞれ画面半分のサイズになるよう設定します.

最後に #inputleft:0px, #outputright:0px とすることで画面半々にキレイにそれぞれフルで表示されるようになります.

あとは padding やら border などを整えて完成です!!

runstant

これで終わりです.

Vue.js 便利ですね♪