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

2020年5月6日 2020年5月7日

概要

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

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

手順

準備

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

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

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

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

// 追加
require("simplemde")


// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)

// 追加
import 'simplemde/dist/simplemde.min.css'

// This file is automatically compiled by Webpack, along with any other files

// present in this directory. You're encouraged to place your actual application logic in

// a relevant structure within app/javascript and only use these pack files to reference

// that code so it'll be compiled.

require("@rails/ujs").start()

require("turbolinks").start()

require("@rails/activestorage").start()

require("channels")

// 追加

require("simplemde")

// Uncomment to copy all static images under ../images to the output folder and reference

// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)

// or the `imagePath` JavaScript helper below.

// const images = require.context('../images', true)

// const imagePath = (name) => images(name, true)

// 追加

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

アプリでの使用

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

app/views/sample/index.html.erb

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

<h2>Editor</h2>

<textarea id="editor" name="name" rows="10" cols="40"></textarea>

<h2>Editor</h2>

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

app/javascript/sample.js

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

import SimpleMDE from 'simplemde'
window.onload = function () {
  const simplemde = new SimpleMDE({ element: document.getElementById("editor") });
};

import SimpleMDE from 'simplemde'

window.onload = function () {

const simplemde = new SimpleMDE({ element: document.getElementById("editor") });

};

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

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

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

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