Easy jQuery Markdown Editor with Instant Preview - mdejs

mdejs.js is an easy-to-use jQuery plugin used to create a clean, WYSIWYG-style markdown editor with instant preview on the webpage.

Dependencies:

• Bootstrap 3's stylesheet for basic styles.
• Font Awesome 4 for editor icons.
• Showdown.js for converting markdown to html.
• jQuery JavaScript library.

Installation:

# NPM
$ npm install mdejs --save

# Bower
$ bower install mdejs --save

How to use it:

1. Include jQuery JavaScript library and other required resources on the web page.

<link rel="stylesheet" href="/path/to/bootstrap.min.css">
<link rel="stylesheet" href="/path/to/font-awesome.min.css">
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/showdown.js"></script>

2. Include the jQuery mdejs.js plugin after jQuery library.

<script src="/path/to/mdejs.js"></script>

3. Create a textarea element for the markdown editor.

<textarea class="mde-input demo" id="markdown-editor">
  ...
</textarea>

4. Create an empty container for the preview area.

<div class="preview"></div>

5. Call the function to convert the textarea into a markdown editor.

$('.demo').mdejs({
  preview_class : 'preview'
});

6. Options and defaults.

textColor: "#000",

toolbars: [
  {
    panels: [
      {
          buttons : [
              {
                  name : "bold",
                  hotkey: "b",
                  icon: "fa fa-bold",
                  css_class : "",
                  action: "doBold"
              },
              {
                  name : "italic",
                  hotkey: "i",
                  icon: "fa fa-italic",
                  css_class : "",
                  action: "doItalic"
              }

          ]
      },
        {
            buttons : [
                {
                    name : "heading",
                    hotkey: "h",
                    icon: "fa fa-header",
                    css_class : "",
                    action: "doHeading"
                },
                {
                    name : "hr",
                    hotkey: "r",
                    icon: "fa fa-ellipsis-h",
                    css_class : "",
                    action: "doHorizontalRule"
                }
            ]
        },
        {
            buttons : [
                {
                    name : "ulist",
                    hotkey: "u",
                    icon: "fa fa-list-ul",
                    css_class : "",
                    action: "doUlList"
                },
                {
                    name : "olist",
                    hotkey: "o",
                    icon: "fa fa-list-ol",
                    css_class : "",
                    action: "doOlList"
                },
                {
                    name : "quote",
                    hotkey: "q",
                    icon: "fa fa-quote-right",
                    css_class : "",
                    action: "doBlockquote"
                }
            ]
        },
        {
            buttons: [
                {
                    name : "code",
                    hotkey: "k",
                    icon: "fa fa-code",
                    css_class : "",
                    action: "doCode"
                },
                {
                    name : "link",
                    hotkey: "l",
                    icon: "fa fa-link",
                    css_class : "",
                    action: "doLink"
                },
                {
                    name : "image",
                    hotkey: "g",
                    icon: "fa fa-file-image-o",
                    css_class : "",
                    action: "doImage"
                }
            ]
        },
        {
            buttons: [
                {
                    name : "undo",
                    hotkey: "z",
                    icon: "fa fa-undo",
                    css_class : "",
                    action: null,
                    execute: function (manager) {
                        return manager.undo();
                    }
                },
                {
                    name : "redo",
                    icon: "fa fa-repeat",
                    css_class : "",
                    action: null,
                    execute: function (manager) {
                        return manager.redo();
                    }
                }
            ]
        }

    ]
  }
],

lang: {
  bold: "Bold",
  boldexample: "Bold Text",

  italic: "Italic",
  italicexample: "Italic Text",

  link: "Link",
  linkdescription: "Insert A Link",
  linkdialog: "<p><b>Insert A Link</b></p><p>https://www.jqueryscript.net/ \"Link Title\"</p>",

  quote: "Quote",
  quoteexample: "Quote Text",

  code: "Code",
  codeexample: "Source Code",

  image: "Image",
  imagedescription: "Insert An Image",
  imagedialog: "<p><b>Insert An Image</b></p><p>http://example.com/images/diagram.jpg \"Image Description\"</p>",

  olist: "Ordered List",
  ulist: "Unordered List",
  litem: "List Item",

  heading: "Heading h1/h2",
  headingexample: "Heading",

  hr: "Horizontal Line",

  undo: "Undo — " + (ua.isWin ? 'Ctrl+Z' : '⌘Z'),
  redo: "Redo — " + (ua.isWin ? 'Ctrl+Y' : '⇧⌘Z'),

  help: "Help"
}

Change logs:

2018-01-23

• Fixes for npm module
• Update deps

2016-02-04

• Some functions are replaced by similar from jquery

2016-02-03

• new dialog using Bootstrap

---

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