Vue.jsでMarkdownエディタをつくったときに工夫したこと

技術書典4にて出版されていた「初めてのシングルページアプリケーション Vue.js と Firebase で作るミニ Web サービス」を boothで購入してMarkdownエディタを作ってみました。

自分なりに不要だと思ったところはカットしたり付け足したり(ちょっとだけ)したので そのときのことをメモ

参考

初めてのシングルページアプリケーション Vue.js と Firebase で作るミニ Web サービス

工夫したこと

  • エディタで書いたマークダウンをダウンロードできるようにしました
  • プレビューのスタイルにgithub-markdown-cssを採用しました

実装

ダウンロードボタンの実装

  1. templateタグ部分にダウンロードボタンを設置
<a id="download" href="#" download="sample.md" @click="download()">ダウンロード</a>
  1. scriptタグ部分にダウンロードメソッドを実装
methods:{
    download: function(){
      var blob = new Blob([this.markdown], {"type" : "text/plain"});

      if(window.navigator.msSaveBlob){
        window.navigator.msSaveBlob(blob, "sample.md");
      } else {
        document.getElementById("download").href = window.URL.createObjectURL(blob);
      }
    },
  }
  • 上記はmethods:{}部分しか記載していませんが、data()部でreturnとしてエディタ部分に記載したマークダウンテキストをmarkdownで受け取れるようにしています。
  • new Blob([this.markdown],{"type":"text/plain"})でエディタ部に記載したマークダウンでBlobオブジェクトを作成
  • IEとEdgeではwindow.navigator.msSaveBlobでBlobオブジェクトを取得できる
  • それ以外のブラウザではwindow.URL.createObjectURLでBlobオブジェクトへのURLを生成して、そこからダウンロードするという手法になる

github-markdown-cssの実装

こちらはGitHubに記載されています。

github-markdown-css

  1. プロジェクト内にnpmでインストールする
npm install github-markdown-css
  1. styleタグ内にインポートする
@import url("../node_modules/github-markdown-css/github-markdown.css");
  1. あとはtemplateタグ内の適用したいclassにmarkdown-bodyクラスを付与すればOK