HTML Javascript Ruby on Rails

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

2020年5月6日

スポンサーリンク

概要

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

© 2024 nobu blog Powered by AFFINGER5