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