Textarea Based Markdown Editor with jQuery

A very simple jQuery plugin that converts a normal textarea element into a markdown editor with a instant preview. Requires marked JavaScript library for fast markdown parsing and compiling.

See also:

• Simple jQuery Based Markdown Editor with Live Preview
• Create A Simple Markdown Editor with jQuery Markdown Plugin
• Ghost-Like Responsive jQuery Markdown Editor with Live Preview

How to use it:

1. Load the necessary jQuery and marked JavaScript libraries in your document.

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="marked.min.js"></script>

2. Load the textarea markdown editor after jQuery library.

<script src="jquery.textarea-markdown-editor.js"></script>

3. Create a textarea for the markdown editor.

<textarea id="editor">
  ...
</textarea>

4. Create an empty container for the preview area.

<div id="preview"></div>

5. Initialize the plugin to enable the markdown editor.

$(function(){
  var $editor = $('#editor');
  var $preview = $('#preview');

  $editor.markdownEditor({
    onInsertedList: function(){ console.log("inserted list"); },
    onInsertedTable: function(){ console.log("inserted table"); },
    onInsertedCodeblock: function(){ console.log("inserted codeblock"); }
  }).focus();

 t= setInterval(function(){
    $preview.html(marked($editor[0].value));
  }, 1000);
});

6. Available options & callbacks.

tabSize: 4,
onInsertedList: null,
onInsertedTable: null,
onInsertedCodeblock: null,
onSortedTable: null,
onMadeTable: null,
tabToSpace: true,
list: true,
table: true,
fontDecorate: true,
codeblock: true,
autoTable: true,
tableSeparator: '---',
csvToTable: true,
sortTable: true,
uploadingFormat: function(name) {
  return "![Uploading... " + name + "]()";
}

Change logs:

2016-04-12

• v0.9.0: Table functions.

2016-02-26

• v0.8.1: fix decorate timing

2016-02-04

• v0.8.0: Font decoratable.

2016-01-12

• Customizable uploading text.

2015-11-04

• add table callback

2015-08-12

• Fix number sort.

2015-08-10

• Can call instance methods.
• Allow insert tab to beginning of unlist lines.

2015-08-07

• Table auto makeable.

---

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