RailsでsimplemdeをつかってMarkdownエディタをつくる

RailsでMarkdownのエディタを実装するために、simplemdeを利用する。

前提
インストール
実装
スクリーンショット

前提

l-chika.hatenablog.com

インストール

npm でフロントのライブラリは管理しているので、npm install でインストール。

$ npm install simplemde --save

実装

app/assets/javascripts/application.js

//= require simplemde/dist/simplemde.min.js

app/assets/stylesheets/application.scss

@import 'simplemde/dist/simplemde.min.css';

form

なぜかスペルチェックでエラーが出力されていたので無効にする

<%= form_for(hoge) do |f| %>

  <div class="form-group">
    <%= f.text_area :foo, class: 'form-control', size: '20x15' %>
  </div>

  <div class='row justify-content-md-center'>
    <%= f.submit('投稿', class: 'btn btn-primary btn-lg') %>
  </div>
<% end %>

<script>
  var simplemde = new SimpleMDE({ element: document.getElementById('hoge_foo'), spellChecker: false});
</script>