Press "Enter" to skip to content

Markdown Editor Based On The Ace And Bootstrap Editor | codeparlMarkdown

Bootstrap Markdown Editor is a jQuery plugin that helps you create a full-featured, customizable tag editor with Bootstrap, Ace Editor, Font Awesome, and Showdown.js.

markdown editor download, markdown editor windows, markdown editor free, markdown editor online, open source markdown editor, github markdown editor


  • Editor Views and Live Preview.
  • Full-screen mode.
  • Configurable toolbar.
  • Importing external markdown files.
  • Supports all Ace editor features.


  • Bootstrap 4
  • jQuery
  • Ace editor (
  • Showdown (

How to make use of it:

1. Upload the necessary resources into 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. Download the codeparlMarkdown jQuery plugin 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 codeparlMarkdown function on the target container in which you want to place the markdown editor.

  // options here

4. Options for configuring the markdown editor.


  // 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) {

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


Markdown Editor For Bootstrap, Bootstrap Markdown Editor Plugin/Github

See Demo And Download

Official Website(codeparl): Click Here

This superior jQuery/javascript plugin is developed by codeparl. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.