Simple Markdown Editor And Parser Plugin For jQuery - SMDE

A simple, configurable markdown editor and parser plugin with support for live preview and WYSIWYG editor toolbar.

Dependencies:

• jQuery library.
• Bootstrap CSS and Glyphicons.
• jQuery textrange plugin.

How to use it:

1. Include jQuery JavaScript library, Twitter Bootstrap framework and jQuery textrange plugin on the webpage.

<link rel="stylesheet" href="/path/to/bootstrap.min.css">
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery-textrange.js"></script>

2. Download and include the jQuery SMDE plugin's files after jQuery library.

<link rel="stylesheet" href="css/jquery-smde.css">
<script src="js/jquery-smde.js"></script>

3. The markdown editor requires a textarea embedded in the webpage.

<textarea id="example"></textarea>

4. Initialize the plugin to convert the textarea into a WYSIWYG markdown editor.

$('#example').SimpleMarkdownEditor();

5. Default configuration options.

$('#example').SimpleMarkdownEditor({
  editor:     true,
  preview:    false,
  sideBySide: false,
  hideEditor: false,
  locale:     'en',

  // custom editor buttons
  buttons:    {
    bold:          true,
    italic:        true,
    boldItalic:    true,
    link:          true,
    orderedList:   true,
    unorderedList: true,
    code:          true,
    preview:       true,
    updatePreview: true,
    quote:         true
  },

  // custom editor icons
  icons:      {
    bold:          '<span class="glyphicon glyphicon-bold"></span>',
    boldItalic:    '<span class="glyphicon glyphicon-bold"></span>' +
                   '<span class="glyphicon glyphicon-italic"></span>',
    close:         '<span class="glyphicon glyphicon-remove pull-right"></span>',
    code:          '<span class="glyphicon glyphicon-asterisk"></span>',
    edit:          '<span class="glyphicon glyphicon-edit pull-right"></span>',
    italic:        '<span class="glyphicon glyphicon-italic"></span>',
    link:          '<span class="glyphicon glyphicon-link"></span>',
    orderedList:   '<span class="glyphicon glyphicon-list"></span>',
    preview:       '<span class="glyphicon glyphicon-search"></span>',
    updatePreview: '<span class="glyphicon glyphicon-refresh"></span>',
    quote:         '<span class="glyphicon glyphicon-comment"></span>',
    unorderedList: '<span class="glyphicon glyphicon-th-list"></span>'
  }
  
});

Change log:

2017-02-14

• added option for css source map

2016-02-18

• v0.1.18

---

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