SimpleForm Markdown Editor

A simple Markdown editor inspired by gollum_editor, the editor used for Github's wiki pages.

Markdown rendering is handled by Redcarpet.

Installation

Add this line to your application's Gemfile:

gem 'simple_form_markdown_editor'

And then execute:

$ bundle

Or install it yourself as:

$ gem install simple_form_markdown_editor

Usage

Require the javascripts in application.js:

//= require simple_form_markdown_editor

And require the stylesheets in application.css:

*= require simple_form_markdown_editor

Finally mount the engine in your routes:

mount SimpleFormMarkdownEditor::Engine => "/"

Use in forms:

= form.input :markdown, as: :markdown_editor

Configuration

Configuration is possible app-wide (using an initializer) and per input.

Refer to redcarpet for a list of available extensions and render options.

Global

# config/initializers/simple_form_markdown_editor.rb

SimpleFormMarkdownEditor::MarkdownEditorInput.configure do |c|
  c.buttons = [%w(h1 h2 h3), %w(strong em), %w(a img)]
  c.button_definitions = { strong: '**%{str}**' }
  c.help = { enabled: true, visible: false }
  c.extensions = {
    footnotes: true,
    smartypants: true,
    lax_spacing: true,
    escape_html: false
  }
  c.render_class = CustomRenderClass
  c.render_options = {
    no_images: true,
    no_links: true
  }
  c.route = '/custom/preview'
end

Input

= f.input :markdown, as: :markdown_editor, buttons: [ %w(h1 h2), %w(a img) ], help: { enabled: true, visible: false }, extensions: { footnotes: true }, render_class: CustomRenderClass, render_options: { no_images: true }, route: '/custom/preview'

Internationalization

All strings (buttons, help etc.) are defined in a I18n YAML file along with buttons and tabs. This can easily be overridden and extended to other languages:

# simple_form_markdown_editor.en.yml

en:
  simple_form_markdown_editor:
    tabs:
      edit: Write
      preview: Sneak peek
    buttons:
      h1: Header 1
      h2: Header 2
      h3: Header 3
      a: Link
      img: Image
    help:
      block_elements:
        title: Blocks
        elements:
          headers:
            title: # Headers
            text: A very good explanation

Testing

The gem includes a rails app for easy testing, simply cd test/dummy, bundle install and bundle exec bin/rails s, then direct your browser to 127.0.0.1:3000 to see the editor in action.

Todo

• How to make it possible to plug in other render engines?
• Highlighting trailing spaces (for linebreaks)?
• Implement keyboard shortcuts
• Implement Ctrl+z
• Implement install task (create YML and config)?