Markdown Editor For Bootstrap - jQuery codeparlMarkdown

codeparlMarkdown is a jQuery plugin that helps you create a full-featured, customizable markdown editor using Bootstrap, Ace Editor, Font Awesome, and Showdown.js.

Features:

• Editor & Live Preview views.
• Fullscreen mode.
• Configurable toolbar.
• Import external markdown files.
• Supports all Ace Editor themes.

See Also:

• 10 Best WYSIWYG Editors For Easier Content Editing

How to use it:

1. Load the necessary resources in the document.

<!-- jQuery Library -->
<script src="/path/to/cdn/jquery.min.js"></script>
<!-- Bootstrap Framework -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.min.js"></script>
<!-- Font Awesome Iconic Font -->
<link rel="stylesheet" href="/path/to/cdn/fontawesome.min.css" />
<!-- Ace Editor -->
<script src="/path/to/cdn/ace.js"></script>
<!-- Showdown Library -->
<script src="/path/to/cdn/showdown.min.js"></script>

2. Load the codeparlMarkdown jQuery plugin's files.

<link rel="stylesheet" href="/path/to/codeparl-bootstrap-markdown-editor.min.css" />
<script src="/path/to/codeparl-bootstrap-markdown-editor.js"></script>

3. Call the function codeparlMarkdown on the target container in which you want to place the markdown editor.

<div class="editor"></div>

$('.editor').codeparlMarkdown({
  // options here
})

4. Available options to config the markdown editor.

$('.editor').codeparlMarkdown({

  // allows fullscreen mode
  fullscreen: true,

  // allows scripts in content
  content: {
    allowScript: false,
  },

  // ACE Editor options
  editor: {
    softTabs: true,
    theme: 'tomorrow',
    editorHeight: '500px',
    editorWidth: '100%',
  },

  // config toolbar and buttons here
  toolbar: {
    bg: '#F7F7F4',
    buttonGroups: [{
      btnHeader1: 'H1',
      btnHeader2: 'H2',
    },
    {
      btnBold: 'fa-bold',
      btnItalic: 'fa-italic',
    },
    {
      btnList: 'fa-list-ul',
      btnOrderedList: 'fa-list-ol',
    },
    {
      btnBlock: 'fa-quote-left',
      btnCode: '{ }',
    },
    {
      btnLink: 'fa-link',
      btnImage: 'fa-image',
    },
    {
      btnEdit: 'fa-edit',
      btnbrowse: 'fa-folder-open',
      btnPreview: 'fa-eye',
      btnFullscreen: 'fa-expand',
    }]
  },

  // You can access the file object of this input here. 
  // You may also validate the file type with your backend script
  onFileBrowse: function($input, aceEditor) {
    if ($input[0].files[0]) {
      var fileReader = new FileReader();
      fileReader.onload = function(e) {
        aceEditor.session.setValue(e.target.result);
        aceEditor.clearSelection();
      }
      fileReader.readAsText($input[0].files[0]);
    }
  },

  // Do something with html 
  onPreview: function(html) {
  }

})

Changelog:

2021-03-04

• Added image upload (requires PHP)

2021-02-24

• Added image upload (requires PHP)

2021-02-22

• Added help bar

---

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