railsに導入できるMarkdown用エディタの紹介

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

社会人2年目も中盤にさしかかっている中西です。

今回は、railsに導入可能なMarkdown用のエディタについて紹介します。

環境

Rails 4.1.4

Ruby 2.1.2

Markdownとは

Markdownとは、ジョン・グルーバー（John Gruber）によって2004年に開発され、その後、多くの開発者の手を経ながら発展してきた文章の書き方です。

「書きやすくて読みやすいプレーンテキストとして記述した文書を、妥当なXHTML（もしくはHTML）文書へと変換できるフォーマット」として作成されています。

このMarkdown文章を書く場合のルール（記法）をMarkdown記法と呼びます。

詳しい記法については、下記を参照してください。

Daring Fireball: Markdown: Syntax

Markdown記法 · 日本語Markdownユーザー会

Markdown用エディタ

Markdownにもとづいた文章を、HTMLへ変換するgemはたくさんの種類が存在しています。

また、Markdown記法で入力を行えるエディタも存在しています。

しかし、Markdown記法での入力をサポートするようなエディタとなると、なかなか見つかりません。

今回は、そんなMarkdown記法での入力をサポートするエディタであり、railsに簡単に導入できるgemである「pagedown-bootstrap-rails」を紹介します。

pagedown-bootstrap-railsとは

「pagedown-bootstrap-rails」というgemは、「pagedown-bootstrap」をもとにrails用にgem化されたものです。

Markdown記法での入力をサポートするために、主要なMarkdown記法をボタン１つで適用することができます。

また、実際の表示がどうなるのか分かるように、入力内容をリアルタイムでプレビュー表示をしてくれます。

導入方法

まず下記のように、Gemfileのgemの宣言を追加します。

Gemfile

gem 'bootstrap-sass'
gem 'font-awesome-rails'
gem 'simple_form'
gem 'pagedown-bootstrap-rails'

「pagedown-bootstrap-rails」以外のgemについては、前提条件として必要となります。

次に、css及びjsを追加します。

application.css

/*= require pagedown_bootstrap */

application.js

//= require pagedown_bootstrap
//= require pagedown_init

sccの場合は下記のようになります。

application.css.scss

@import "pagedown_bootstrap";

SimpleFormをもちいて表示の変換部分を作成します。

app/inputs/pagedown_input.rb

class PagedownInput < SimpleForm::Inputs::TextInput
  def input(wrapper_options)
    out = "\n"
    html_options = input_html_options.merge(class: 'wmd-input', id: "wmd-input-#{attribute_name}")
    out << "#{@builder.text_area(attribute_name, merge_options(html_options, wrapper_options)) }"
    if input_html_options[:preview]
      out << ""
    end
    out.html_safe
  end

  private

  def merge_options(html_opts, wrapper_opts)
    html_opts.merge(wrapper_opts) { |_key, first, second| first + ' ' + second }
  end
end

後は、エディタを表示したい部分に、下記のように記述するだけでエディタが表示されます。

<%= simple_form_for(@article) do |f| %>
  <%= f.input :body, as: :pagedown, input_html: { preview: true, rows: 20 } %>
<% end %>

[マークダウン用エディタ.png:image]

まとめ

今回は、Markdown記法での入力をサポートするエディタである、「pagedown-bootstrap-rails」を紹介しました。

railsでブログサイト等を作成するときに、Markdown記法で記事を作成したい場合にはぜひ導入を検討してみてください。

参考

日本Markdownユーザー会

pagedown-bootstrap-rails