Simple Markdown editing tools that works!

Bootstrap-Markdown designed to be easily integrated with your bootstrap project. It exposes useful API that allow you to fully hook-in into the plugin

Markup

Switch regular textarea within your form into Bootstrap-Markdown editor seamlessly by adding data-provide="markdown" attribute

Code

<form>
    <input name="title" type="text" placeholder="Title?" />
    <textarea name="content" data-provide="markdown" rows="10"></textarea>
    <label class="checkbox">
      <input name="publish" type="checkbox"> Publish
    </label>
    <hr/>
    <button type="submit" class="btn">Submit</button>
  </form>

Result

Inline editing with Bootstrap-Markdown is done by adding data-provide="markdown-editable" attribute

Code

<div data-provide="markdown-editable">
          <h3>This is some editable heading</h3>
          <p>Well, actually all contents within this "markdown-editable" context is really editable. Just click anywhere!</p>
</div>

Result

This is some editable heading

Well, actually all contents within this "markdown-editable" context is really editable. Just click anywhere!

Usage

Beside using above data-attributes, you could call it via code

$("#some-textarea").markdown({autofocus:false,savable:false})

Noted that Bootstrap-Markdown could be used as a standalone input (without any form). Set savable parameter to true will do the job. Options can be passed via data attributes or via code. Available options are:

Option Name	Type	Description
`autofocus`	`boolean`	Indicates that editor will focused after instantiated. Default to `false`
`savable`	`boolean`	Indicates that editor will have save button and action. Default to `false`
`hideable`	`boolean`	If set to `true` then the editor will be hidden on `blur` event. Default to `false`
`width`	`mixed`	The edtor width. Default to `inherit`. You could supply any numerical value (that will be set as css), or supply valid Bootstrap class (something like `span2`)
`height`	`mixed`	The edtor height. Default to `inherit`

Some examples

Custom width using data-width="400" attribute

Hideable on blur using data-hideable="true" attribute

Savable using data-savable="true" attribute

Events/Hook

There are four main events within Bootstrap-Markdown lifecycle : onShow, onPreview, onSave and onBlur. Heres an example to hook into those events via code:

Code

$("#target-editor").markdown({
  savable:true,
  onShow: function(e){
    alert("Showing "
      +e.$textarea.prop("tagName").toLowerCase()
      +"#"
      +e.$textarea.attr("id")
      +" as Markdown Editor...")
  },
  onPreview: function(e) {
    var previewContent

    if (e.isDirty()) {
      var originalContent = e.getContent()

      previewContent = "Prepended text here..."
             + "\n"
             + originalContent
             + "\n"
             +"Apended text here..."
    } else {
      previewContent = "Default content"
    }

    return previewContent
  },
  onSave: function(e) {
    alert("Saving '"+e.getContent()+"'...")
  },
  onBlur: function(e) {
    alert("Blur triggered!")
  }
})

Result

Editor Panel

Bootstrap-Markdown panel could be easily extended to suit your own specific needs. You can just set additionalButtons param, with your own buttons group. Heres an example to add button group into editor panel

Code

$("#target-editor-with-custom-buttons").markdown({
  additionalButtons: [
    [{
          name: "groupCustom",
          data: [{
            name: "cmdBeer",
            toggle: true, // this param only take effect if you load bootstrap.js
            title: "Beer",
            icon: "icon icon-glass",
            callback: function(e){
              // Replace selection with some drinks
              var chunk, cursor, 
                  selected = e.getSelection(), content = e.getContent(),
                  drinks = ["Heinekken", "Budweiser", 
                            "Iron City", "Amstel Light", 
                            "Red Stripe", "Smithwicks", 
                            "Westvleteren", "Sierra Nevada", 
                            "Guinness", "Corona", "Calsberg"],
                  index = Math.floor((Math.random()*10)+1)


              // Give random drink
              chunk = drinks[index]

              // transform selection and set the cursor into chunked text
              e.replaceSelection(chunk)
              cursor = selected.start

              // Set the cursor
              e.setSelection(cursor,cursor+chunk.length)
            }
          }]
    }]
  ]
})

Result

API

As you may already notice by now, all hook would passed Editor instance (declared as e in all above examples). It means you could easily use its API to interact with the editor for any purposes. Heres the complete list of Bootstrap-Markdown APIs.

Method Name	Description
`showEditor()`	Toggle on the editor visibility
`showPreview()`	Toggle on the preview visibility
`hidePreview()`	Toggle off the editor visibility
`isDirty()`	Check the editor content state, return true if the original content was changed
`getContent()`	Get the editor content
`setContent(string content)`	Set the editor content
`findSelection(string words)`	Find some words/sentence within the editor and returned selection object(containing word position and other useful information).
`getSelection()`	Get the current selected chunk of words within the editor.
`setSelection(int start, int end)`	Tell the editor to select a span of words from `start` to `end`.
`replaceSelection(string content)`	Replace the current selected chunk of words within the editor with any content.
`getNextTab()`	Get the next tab memory. Returned selection object(containing word position and other useful information).
`setNextTab(int start, int end)`	Tell the editor to select a span of words from `start` to `end` at next `tab` keypress event.
`enableButtons(string name)`	Enabled a button by `name` that described in `buttons` or `additionalButtons` arrays. Passing `all` will enabled all buttons.
`disableButtons(string name)`	Disabled a button by `name` that described in `buttons` or `additionalButtons` arrays. Passing `all` will disabled all buttons.

NOTE

Altought the primary purpose of this plugin is to provide Markdown editor, the design is allowing the plugin to be used as a general purpose editor.

The preview functionalities and html to markdown conversion are provided by 3rd party codes : markdown-js and to-markdown. Without them, this plugin would still work and convert the content as-is, so you could easily modify those functionalities yourself via available hooks.

Bootstrap Markdown

Markdown editing meet Bootstrap

Simple Markdown editing tools that works!

Markup

Code

Result

Code

Result

This is some editable heading

Usage

Some examples

Events/Hook

Code

Result

Editor Panel

Code

Result

API