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

Features:

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

Requirements:

  • Bootstrap 4
  • jQuery
  • Ace editor (http://ace.c9.io)
  • Showdown (http://showdownjs.com/)

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.

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

4. Options for configuring 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) {
  }

})

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.