A Ruby gem version of pagedown-bootstrap for the Rails asset pipeline.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib
vendor/assets
.gitignore
Gemfile
LICENSE
README.md
Rakefile
pagedown-bootstrap-rails.gemspec

README.md

PageDown Bootstrap Rails

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

Installation

Add to your Gemfile:

gem 'pagedown-bootstrap-rails'

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

Usage

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.

SimpleForm

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:

Glorious