Skip to content
Extension for SimpleForm textarea with Markdown preview.
Ruby HTML Other
Branch: master
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.
app/controllers/simple_form_markdown_editor
config
lib
test/dummy
.gitignore
CHANGELOG.md
Gemfile
Gemfile.lock
README.md
Rakefile
simple_form_markdown_editor.gemspec

README.md

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)?
You can’t perform that action at this time.