PageDown Bootstrap Rails

A Ruby gem version of https://github.com/tchapi/pagedown-bootstrap for the Rails asset pipeline.

Add to your Gemfile:

gem 'pagedown-bootstrap-rails'

You’ll also need Bootstrap 3 (Sass version) and Font Awesome.

Require the CSS with Sprockets:

/*= require pagedown_bootstrap */

Or with an SCSS import:

@import "pagedown_bootstrap";

Sprockets require the JS too:

//= require pagedown_bootstrap

Or individually as you please:

  //= require markdown.converter
  //= require markdown.editor
  //= require markdown.sanitizer
  //= require markdown.extra

You will need to initialize PageDown in your form, so PageDown Bootstrap Rails comes with pagedown_init for you to optionally include:

  $ ->
    $('textarea.wmd-input').each (i, input) ->
      attr = $(input).attr('id').split('wmd-input')[1]
      converter = new Markdown.Converter()
      Markdown.Extra.init(converter)
      help =
        handler: () ->
          window.open('http://daringfireball.net/projects/markdown/syntax')
          return false
        title: "<%= I18n.t('components.markdown_editor.help', default: 'Markdown Editing Help') %>"
      editor = new Markdown.Editor(converter, attr, help)
      editor.run()

Just require it after pagedown_bootstrap:

//= require pagedown_bootstrap
//= require pagedown_init

This obviously requires CoffeeScript and jQuery, so if you’re not using these then feel free to write your own initializer. Additionally, if you’re using Turbolinks then I suggest either using jQuery Turbolinks or writing your own initializer that does not rely on jQuery.ready() like the one above.

Here’s a SimpleForm input that creates the correct HTML for the initializer above.

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
    classes = input_html_options[:class] || []
    classes << 'wmd-input form-control'
    @builder.text_area(
      attribute_name,
      input_html_options.merge(
        class: classes, id: "wmd-input-#{attribute_name}"
      )
    )
  end
end

Which you use in your form like so:

= f.input :description, as: :pagedown, input_html: { preview: true, rows: 10 }

This is how it looks: