Simple WYSIWYG Markdown Editor With jQuery And Bootstrap

Bootstrap Markdown Editor uses jQuery, Bootstrap 3, Ace.js and Marked.js to create a simple, clean WYSIWYG markdown editor with live preview support.

Key features:

• 3 editor mode: edit, fullscreen and live preview.
• Supports for image uploading.
• AJAX enabled.
• Custom shortcuts.
• Ace.js themes supported.
• Marked.js based fast markdown parsing.

See also:

• Simple Markdown Editor And Parser Plugin For jQuery - SMDE

Basic usage:

1. Load jQuery library, Bootstrap framework and other required resources in the html page.

<link href="bootstrap.min.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="ace.js"></script>
<script src="marked.min.js"></script>

2. Download and include the Bootstrap Markdown Editor's JavaScript and Stylesheet in the html page. Note that the bootstrap-markdown-editor.js should be loaded after jQuery library.

<link href="bootstrap-markdown-editor.css">
<script src="bootstrap-markdown-editor.js"></script>

3. Create a form for the markdown editor.

<form id="form">
  <textarea name="text" id="editor">
    # Header Level 1
  </textarea>
</form>

4. Initialize the markdown editor.

$('#editor').markdownEditor({
  // options here
});

5. All default customization options.

$('#editor').markdownEditor({

  // width / height of the editor
  width: '100%',
  height: '400px',

  // font size
  fontSize: '14px',

  // Ace.js themes
  // refer to https://github.com/ajaxorg/ace/tree/master/lib/ace/theme
  theme: 'tomorrow',

  // Soft tabs means you're using spaces instead of the tab character ('\t')
  softTabs: true,

  // active fullscreen mode
  fullscreen: true,

  // enable image upload
  imageUpload: false,

  // The path of the server side script that receives the images. 
  // The script has to return an array of the public path of the successfully uploaded images in json format.
  uploadPath: '',

  // active preview mode
  preview: false,

  // called when the user clicks on the preview button
  onPreview: function (content, callback) {
      callback(content);
  },

  // custom label text
  label: {
    btnHeader1: 'Header 1',
    btnHeader2: 'Header 2',
    btnHeader3: 'Header 3',
    btnBold: 'Bold',
    btnItalic: 'Italic',
    btnList: 'Unordered list',
    btnOrderedList: 'Ordered list',
    btnLink: 'Link',
    btnImage: 'Insert image',
    btnUpload: 'Upload image',
    btnEdit: 'Edit',
    btnPreview: 'Preview',
    btnFullscreen: 'Fullscreen',
    loading: 'Loading'
  }
  
});

6. API methods.

// Returns the content of the editor
var content = $('#Editor').markdownEditor('content'); 

// Sets the content of the editor
$('#Editor').markdownEditor('setContent', content); 

Change log:

v2.0.2 (2016-12-02)

• JS fixed

v2.0.1 (2016-04-14)

• JS udapte.

v2.0.0 (2016-03-27)

• Uses textarea instead of div and sync the text

---

This awesome jQuery plugin is developed by inacho. For more Advanced Usages, please check the demo page or visit the official website.