nobu blog

プログラミングやゲームの話など。

*



Ruby on RailsでマークダウンエディタのSimpleMDEを使用する。(Rails6)

      2020/05/07

概要

Rails6にSimpleMDEを組み込む方法のメモ。
Railsはjsの管理方法などが独自なので忘備録。

SimpleMDEを使うと下記のようなマークダウンエディタが簡単に実装できる。

手順

準備

適当なプロジェクトを作成
rails new mark_down_test

YarnでSimpleMDEをインストール
yarn add simplemde

webpackにコンパイル対象として組み込む。
app/javascript/packs/application.jsにjsとcssの参照を追加する。

アプリでの使用

適当なコントローラとビューを作成。
例:rails g controller sample

app/views/sample/index.html.erb

ビューにtextareaタグを作成する。

次にアプリで使用するjsを作成する。
app/javascriptディレトクリ以下に格納する。

app/javascript/sample.js

js内でsimplemdeをimportして使用する。

application.jsにコンパイル対象として追加する。
// 追加
require(“sample”)

(app/javascript/packsディレクトリ以下に入れた場合は自動でコンパイル対象となるので記載は不要。)

後はrails sで立ち上げればエディタが表示される。

2020/05/07 追記
turbolinksが入っている環境で動かすと画面をエディタが複数作られる症状が発生したのでturbolinkを消すことで対応した。
リンク

 - HTML, Javascript, Ruby on Rails