Textarea Based Markdown Editor with jQuery
File Size: | 62.1 KB |
---|---|
Views Total: | 3368 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.