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 editor 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 editor height. Default to `inherit`
`resize`	`string`	Option to disable or change the resize property, possible values `none`,`both`,`horizontal`,`vertical`. Default `none` If this option is enabled, the user will be able to resize the editor and preview screen. Browser support This is currently only supported on limited browsers. See Can you run it: Resize for all supported browsers
`iconlibrary`	`string`	The icon library to use. Glyphicons (`glyph`), Font Awesome (`fa`) and Octicons (`octicons`) are supported. In order to use Font Awesome properly, you'll need to include Font Awesome stylesheet yourself. Also for use Octicons, follow instructions here. Default to `glyph`
`language`	`string`	Localization setting. Default to `en`
`footer`	`mixed`	Footer dom. Can be string or callback. Default is empty string
`fullscreen`	`object`	Contains `enable` (`bool`) and `icons` (`object`) keys.
`hiddenButtons`	`mixed`	Array or string of button names to be hidden. Default is empty string
`disabledButtons`	`mixed`	Array or string of button names to be disabled. Default is empty string
`dropZoneOptions`	`object`	Enables integration with DropZone for allowing file upload/linking via drag&drop. The options are directly passed to the DropZone library. Valid options are described here

Some examples

Custom width using data-width="400" attribute

Hidden buttons using data-hidden-buttons="cmdBold" attribute

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

Savable using data-savable="true" attribute

Select Font Awesome icons instead of Glyphicons (requires Font Awesome stylesheet) using data-iconlibrary="fa"

Events/Hook

There are six main events within Bootstrap-Markdown lifecycle : onShow, onPreview, onChange, onSave, onFocus 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()+"'...")
  },
  onChange: function(e){
    console.log("Changed!")
  },
  onFocus: function(e) {
    alert("Focus triggered!")
  },
  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: "glyphicon glyphicon-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

With robust options and hooks available, you can also tweak the editor to fully suit with your needs. Here is an example to create a twitter input, markdown way...

Result

Localization

Bootstrap-Markdown language option provides a convenient way of retrieving strings in various languages, allowing you to easily support multiple languages within your application.

First, you need to include the language message, for example you can have bellow lines :

;(function($){
  $.fn.markdown.messages['fr'] = {
    'Bold': "Gras",
    'Italic': "Italique",
    'Heading': "Titre",
    'URL/Link': "Insérer un lien HTTP",
    'Image': "Insérer une image",
    'List': "Liste à puces",
    'Preview': "Prévisualiser",
    'strong text': "texte important",
    'emphasized text': "texte souligné",
    'heading text': "texte d'entête",
    'enter link description here': "entrez la description du lien ici",
    'Insert Hyperlink': "Insérez le lien hypertexte",
    'enter image description here': "entrez la description de l'image ici",
    'Insert Image Hyperlink': "Insérez le lien hypertexte de l'image",
    'enter image title here': "entrez le titre de l'image ici",
    'list text here': "texte à puce ici"
  };
}(jQuery))

Afterward, just set the language to use defined locale code

Code

$("#target-editor-with-custom-language").markdown({language:'fr'})

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
`parseContent()`	Get the parsed 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.
`showButtons(string name)`	Show a button by `name` that described in `buttons` or `additionalButtons` arrays.
`hideButtons(string name)`	Hide a button by `name` that described in `buttons` or `additionalButtons` arrays.

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, marked (default failover if markdown-js lib not available) 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.

Optionally, you could also support hotkeys by simply including jquery.hotkeys.js (default buttons has already default hotkeys).

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

Result

Localization

Code

Result

API