hughevans/pagedown-bootstrap-rails

Name: pagedown-bootstrap-rails

Description: A Ruby gem version of pagedown-bootstrap for the Rails asset pipeline.

Created: 2013-06-04 11:08:23.0

Updated: 2018-01-30 00:18:33.0

Pushed: 2017-05-24 15:32:20.0

Homepage:

Size: 158

Language: Ruby

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

PageDown Bootstrap Rails

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

Installation

Add to your Gemfile:

'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:

ort "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.

s PagedownInput < SimpleForm::Inputs::TextInput
f 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
d

ivate

f 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}"
  )
)
d

Which you use in your form like so:

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

This is how it looks: