View on GitHub

Bootstrap Markdown

Markdown editing meet Bootstrap

Download this project as a .zip file Download this project as a tar.gz file

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) and Font Awesome (fa) are supported. In order to use Font Awesome properly, you'll need to include Font Awesome stylesheet yourself. Default to glyph
language string Localization setting. Default to en
footer mixed Footer dom. Can be string or callback. Default is empty string
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
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).