jQuery Plugin For Editable Content with Markdown Editing - Markdownify

File Size: 16.9 KB
Views Total: 1222
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For Editable Content with Markdown Editing - Markdownify

Markdownify is a content editing plugin for jQuery that helps you create web based editable content with support for markdown editing.

How to use it:

1. Load jQuery library and the jQuery Makrdownify plugin at the end of the document.

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="src/jquery.markdownify.js"></script>

2. Load the required marked JavaScript library for markdown parsing.

<script src="marked.js"></script>

3. Create editable web content following the markup like this:

<div class="editable">
  <button>Save</button></h3>
  <textarea>
    Markdown markups here
  </textarea>
</div>

4. Call the function on the target container to make it editable.

$(".container").markdownify(//options);

5. Possible plugin options.

$(".container").markdownify({

  // the selector used to find the input field where the markdown will be entered
  input: 'textarea',

  // the selector used to find the element that will bind to the click event
  submit: 'button',

  // the element to wrap the new HTML created from markdown
  wrapper: $('<div class="markdownify">'
    
});

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