Feature-rich WYSIWYG Markdown Editor Plugin with jQuery - MKEditor

File Size: 34.2 KB
Views Total: 2427
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Feature-rich WYSIWYG Markdown Editor Plugin with jQuery - MKEditor

MKEditor is a simple yet robust jQuery plugin that helps you generates a WYSIWYG markdown editor from a textarea element.

Features:

  • Uses Font Awesome 4 for editor icons.
  • Word / character / line counters.
  • Instant preview.
  • Fullscreen mode.
  • Smooth scrolling effect.
  • i18n. Currently supports 'en' and 'fr'.

How to use it:

1. Insert the following snippets into your document. Note that the mkeditor.js should be placed after jQuery JavaScript library but before the closing body tag.

<link rel="stylesheet" href="css/mkeditor.css">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/mkeditor.js"></script>

2. Load the required Font Awesome 4 for editor buttons.

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

3. Create a textarea with predefined markdown syntax on the webpage.

<textarea cols="100" placeholder="Placeholder" rows="10">
  An h1 header
  ============
</textarea>

4. Call the plugin to turn the textarea into a WYSIWYG markdown editor.

$('textarea').MKEditor();

5. Default configuration options.

$('textarea').MKEditor({

  // placeholder
  placeholder: '',

  // fullscreen mode
  fullscreen: false,

  // 'en' or 'fr'
  language: 'en',

  // resizable
  resize: false,

  // fixed size
  fixed: true,

  // character limit
  limit: 0,

  // hide specific editor buttons
  hideBtn: []
  
});

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