[Rails] pagedown markdown editor使用方式

前置

須先安裝好以下幾個gem

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

##安裝方式

1. 加入pagedown-bootstrap-rails至gemfile gem 'pagedown-bootstrap-rails' bundle install

2. 加入application.scss scss app/assets/stylesheets/application.scss @import "pagedown_bootstrap";

3. 加入application.js

   // [path] app/assets/javascripts/application.js
   //= require pagedown_bootstrap
   //= require pagedown_init
   

4. 再開一個input資料夾存放pagedown_input.rb

# [path] app/input/pagedown_input.rb
class PagedownInput < SimpleForm::Inputs::TextInput
  def input
    out = "<div id=\"wmd-button-bar-#{attribute_name}\"></div>#{wmd_input}"

    if input_html_options[:preview]
      out << "<div id=\"wmd-preview-#{attribute_name}\" class=\"wmd-preview\"></div>"
    end

    out.html_safe
  end

  private

  def wmd_input
    @builder.text_area(
      attribute_name,
      input_html_options.merge(
        class: 'wmd-input form-control',
           id: "wmd-input-#{attribute_name}"
      )
    )
  end
end

使用方式

在想要加入的template放入

<%= f.input :content, as: :pagedown, input_html: { preview: true, rows: 10 } %>

效果如下：

參考

1. https://github.com/hughevans/pagedown-bootstrap-rails
2. http://doruby.kbmj.com/nakanishi/20150728/rails_Markdown_