Bootstrap Markdown : jQuery plugin for markdown editing

Download   Demo

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><inputname="title"type="text"placeholder="Title?"/><textareaname="content"data-provide="markdown"rows="10">
</textarea><labelclass="checkbox"><inputname="publish"type="checkbox"> Publish
 </label><hr/><buttontype="submit"class="btn">Submit</button></form>

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

Code

<divdata-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:

 

 

 

 

Bootstrap Markdown : jQuery plugin for markdown editing

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. Default to none
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