Minimal WYSIWYG Markdown Editor With Instant Preview - jQuery Markdown live

Just another jQuery based WYSIWYG markdown editor that features instant preview, customizable editor bar and multiple instance on one page. The plugin uses js-markdown-extra library for fast Markdown parsing.

How to use it:

1. Include the Font Awesome 4 for custom editor icons.

<link rel="stylesheet" href="font-awesome.min.css">

2. Include the necessary jQuery and js-markdown-extra libraries on the webpage.

<script src="jquery.min.js"></script>
<script src="js-markdown-extra.min.js"></script>

3. Include the jQuery Markdown live's JS and CSS files after jQuery library.

<script src="jquery.min.js"></script>
<script src="js-markdown-extra.min.js"></script>

4. Create a textarea for the markdown editor.

<textarea data-bar=".editor-bar" data-preview=".editor-preview">
  ...
</textarea>

5. Create an empty container for the preview area.

<div class="markdownlive-preview editor-preview"></div>

6. Create an editor bar for the markdown editor.

<div class="bar">
  <ul class="markdownlive-bar editor-bar">
    <li title="Bold" data-before="**" data-after="**" data-placeholder="some text in bold">
      <i class="fa fa-bold"></i>
    </li>
    <li title="Italics" data-before="*" data-after="*" data-placeholder="some text in italic">
      <i class="fa fa-italic"></i>
    </li>
    <li title="Link" data-before="[ " data-after="](http:// &quot;Link title&quot;)" data-placeholder="link">
      <i class="fa fa-link"></i>
    </li>
    <li title="Image" data-before="![Alt text](" data-after=")" data-placeholder="http://">
      <i class="fa fa-picture-o"></i>
    </li>
    <li title="Unordered list" data-before="* " data-after="" data-extendselect="1">
      <i class="fa fa-list-ul"></i>
    </li>
    <li title="Ordered list" data-before="1. " data-after="" data-placeholder="Item 1&#13;2. Item 2&#13;3. Item 3&#13;" data-extendselect="1">
      <i class="fa fa-list-ol"></i>
    </li>
    <li title="Blocks" data-before="    " data-after="" data-placeholder="A block content" data-block="1" data-extendselect="1">
      <i class="fa fa-indent"></i>
    </li>
    <li title="Table" data-before="" data-placeholder="First Header  &#124;Second Header &#13;------------- &#124;------------- &#13;Content cell 1 &#124;Content cell 2 &#13;Content cell 3  &#124;Content cell 4 &#13;" data-after="" data-block="1">
      <i class="fa fa-table"></i>
    </li>
    <li title="Quote" data-before="> " data-after="" data-extendselect="1" data-block="1" data-placeholder="Quoted text">
      <i class="fa fa-quote-right"></i>
    </li>
    <li title="Horizontal rule" data-before="***" data-after="" data-extendselect="1" data-block="1">
      <i class="fa fa-ellipsis-h"></i>
    </li>
    <li title="Center" data-before="<center>" data-after="</center>" data-extendselect="1">
      <i class="fa fa-align-center"></i>
    </li>

  </ul>
</div>

7. Just call the function on the textarea element and we're done.

(function ( $ ) {

  'use strict';

  $('textarea').markdownlive();

}(jQuery));

Change log:

2018-03-02

• Fixed a bug with scroll position when press buttons on the toolbar.

 

2016-03-25

• bugfix

---

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