A Boostrap styled markdown editor that converts a native HTML textarea to an advanced markdown editor. The editor offers live preview, export, full screen mode, and more features. The editor includes inbuilt support for markdown parsing using markdown-it JS based parser. However, the editor can support any markdown parser via javascript library / method or even a server based parser via an ajax action. Other markdown parsers are configurable (both as a server call OR a local JS method/library). In addition, the plugin allows custom button actions and properties to be setup.
View a complete demo.
Not seeing the updated content on this page! Hard refresh your browser to clean cache for this page (e.g. SHIFT-F5 on Windows Chrome)
markdown-it parser are:
markdown-it plugins like emojis, smart arrows, checkboxes, subscript, superscript, definition list, footnote, abbreviation, marked / inserted text etc.The krajee-markdown-editor plugin can be installed automatically or manually using one of these options:
Installation via bower package manager is as simple as running:
$ bower install krajee-markdown-editor
Installation via NPM is as simple as running:
$ npm install krajee-markdown-editor
Bootstrap 5.x or 4.x or Bootstrap 3.x. However, the plugin can be customized for any CSS framework using templates.
Font Awesome 5 Free Icons. This is the default
icon rendering CSS library used. However, it can be changed via themes. For example, the
Font Awesome 4.7 Icons can be configured for use via the
fa4 theme available with plugin.
Latest JQuery
textarea inputs to a markdown editor widget whenever you
attach a css class markdown to the textarea input. But, if you are initializing the
plugin separately via javascript, then DO NOT ATTACH the css class markdown to the input
(as it will result in duplicate initializations and the javascript code maybe skipped).
Load the following assets on your application page in the order mentioned.
Note that the /path/to in the links below specifies the web accessible location on your server
where you have extracted and installed the
krajee-markdown-editor repo's files.
<!-- any of bootstrap 5.x, 4.x, 3.x styling is supported. Plugin auto detects bootstrap version based on
bootstrap JS library loaded on the page. Else set `$.fn.markdownEditorBsVersion` explicitly before initializing the plugin -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" crossorigin="anonymous">
<!-- Font Awesome 5.x Icon library (check themes to change this) -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.9.0/css/all.css">
<!-- Krajee Markdown Editor Main Library Default Style -->
<link href="https://cdn.jsdelivr.net/gh/kartik-v/krajee-markdown-editor@1.0.0/css/markdown-editor.css" media="all" rel="stylesheet" type="text/css"/>
<!-- Highlight JS style provided with plugin for code styling -->
<link href="https://cdn.jsdelivr.net/gh/kartik-v/krajee-markdown-editor@1.0.0/plugins/highlight/highlight.min.css" media="all" rel="stylesheet" type="text/css"/>
<!-- jQuery JS Library -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- Twitter Emojis Plugin (if you need twitter emojis) -->
<script src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js"></script>
<!-- Include DOM purify plugin if you need to purify HTML output (needed only if markdown-it HTML input
is allowed). This must be loaded before markdown-editor.js. -->
<script src="https://cdn.jsdelivr.net/gh/kartik-v/krajee-markdown-editor@1.0.0/plugins/purify/purify.min.js" type="text/javascript"></script>
<!-- Markdown IT Main Library -->
<script src="https://cdn.jsdelivr.net/gh/kartik-v/krajee-markdown-editor@1.0.0/plugins/markdown-it/markdown-it.min.js" type="text/javascript"></script>
<!-- Markdown IT Definition List Plugin -->
<script src="https://cdn.jsdelivr.net/gh/kartik-v/krajee-markdown-editor@1.0.0/plugins/markdown-it/markdown-it-deflist.min.js" type="text/javascript"></script>
<!-- Markdown IT Footnote Plugin -->
<script src="https://cdn.jsdelivr.net/gh/kartik-v/krajee-markdown-editor@1.0.0/plugins/markdown-it/markdown-it-footnote.min.js" type="text/javascript"></script>
<!-- Markdown IT Abbreviation Plugin -->
<script src="https://cdn.jsdelivr.net/gh/kartik-v/krajee-markdown-editor@1.0.0/plugins/markdown-it/markdown-it-abbr.min.js" type="text/javascript"></script>
<!-- Markdown IT Subscript Plugin -->
<script src="https://cdn.jsdelivr.net/gh/kartik-v/krajee-markdown-editor@1.0.0/plugins/markdown-it/markdown-it-sub.min.js" type="text/javascript"></script>
<!-- Markdown IT Superscript Plugin -->
<script src="https://cdn.jsdelivr.net/gh/kartik-v/krajee-markdown-editor@1.0.0/plugins/markdown-it/markdown-it-sup.min.js" type="text/javascript"></script>
<!-- Markdown IT Underline/Inserted Text Plugin -->
<script src="https://cdn.jsdelivr.net/gh/kartik-v/krajee-markdown-editor@1.0.0/plugins/markdown-it/markdown-it-ins.min.js" type="text/javascript"></script>
<!-- Markdown IT Mark Plugin -->
<script src="https://cdn.jsdelivr.net/gh/kartik-v/krajee-markdown-editor@1.0.0/plugins/markdown-it/markdown-it-mark.min.js" type="text/javascript"></script>
<!-- Markdown IT SmartArrows Plugin -->
<script src="https://cdn.jsdelivr.net/gh/kartik-v/krajee-markdown-editor@1.0.0/plugins/markdown-it/markdown-it-smartarrows.min.js" type="text/javascript"></script>
<!-- Markdown IT Checkbox Plugin -->
<script src="https://cdn.jsdelivr.net/gh/kartik-v/krajee-markdown-editor@1.0.0/plugins/markdown-it/markdown-it-checkbox.min.js" type="text/javascript"></script>
<!-- Markdown IT East Asian Characters Line Break Plugin -->
<script src="https://cdn.jsdelivr.net/gh/kartik-v/krajee-markdown-editor@1.0.0/plugins/markdown-it/markdown-it-cjk-breaks.min.js" type="text/javascript"></script>
<!-- Markdown IT Emoji Plugin -->
<script src="https://cdn.jsdelivr.net/gh/kartik-v/krajee-markdown-editor@1.0.0/plugins/markdown-it/markdown-it-emoji.min.js" type="text/javascript"></script>
<!-- Highlight JS Main Plugin Library for code styling -->
<script src="https://cdn.jsdelivr.net/gh/kartik-v/krajee-markdown-editor@1.0.0/plugins/highlight/highlight.min.js" type="text/javascript"></script>
<!-- Bootstrap Complete Bundle Library (including Popper) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" type="text/javascript"></script>
<!-- Krajee Markdown Editor Main Library -->
<script src="https://cdn.jsdelivr.net/gh/kartik-v/krajee-markdown-editor@1.0.0/js/markdown-editor.js" type="text/javascript"></script>
<!-- Optionally include theme.js script or theme.css for a different theme if needed -->
<!-- script src="https://cdn.jsdelivr.net/gh/kartik-v/krajee-markdown-editor@1.0.0/themes/fa5/theme.js" type="text/javascript"></script -->
<!-- Optionally include localization script for your language if needed -->
<!-- script src="https://cdn.jsdelivr.net/gh/kartik-v/krajee-markdown-editor@1.0.0/js/locales/en.js" type="text/javascript"></script>
If you noticed, you need to load the jquery.min.js and bootstrap.min.css in addition
to the markdown-editor.min.css and markdown-editor.min.js.
The theme and locale file for your theme and language can be optionally included for styling as per your need or
translating for your locale if needed. In order to use twitter emojis - you need to set the useTwemoji property to true in the plugin and load the twitter emoji library twemoji.min.js before markdown.min.js library and other markdown-it scripts.
When using with a specific version of bootstrap, specify the bsVersion in your plugin settings.
For example, if using with bootstrap 3.x - set it to the relevant version 3.3.7. By default, the plugin
is set to work with bootstrap 4.x.
The purify.min.js file is the source for the DomPurify plugin by cure53. It is required to be loaded before markdown-editor.min.js if you wish to purify your HTML for HTML content preview and is called when purifyHtml is set to true. This is normally only needed when you set allow html to true within markdownItOptions.
The twemoji.min.js file is the source for the Twitter Emoji Plugin. It is required to be loaded before markdown-editor.min.js if you wish to use Twitter Emojis when useTwemoji is set to true.
Note that Krajee Markdown Editor uses the markdown-it JS Based parser library by default. The markdown-it library supports various plugins. The following markdown-it plugins are included by default with the plugin repo. Set markdownItPlugins property to choose / specify which plugins you need to be loaded.
markdown-it-abbr.min.jsmarkdown-it-checkbox.min.jsmarkdown-it-cjk-breaks.min.jsmarkdown-it-container.min.jsmarkdown-it-deflist.min.jsmarkdown-it-emoji.min.jsmarkdown-it-emoji-light.min.jsmarkdown-it-footnote.min.jsmarkdown-it-ins.min.jsmarkdown-it-mark.min.jsmarkdown-it-smartarrows.min.jsmarkdown-it-sub.min.jsmarkdown-it-sup.min.jsRender a textarea input on your page as shown below
<textarea id="editor-id" rows="15"> </textarea>
Next initialize the plugin on your page. For example to initialize using javascript - the following
javascript code can be placed in document.ready or at any place you wish on your page after your
textarea input is rendered.
// initialize with defaults
$("#editor-id").markdownEditor();
// with plugin options
$("#editor-id").markdownEditor({useTwemoji: true});
The #editor-id is the identifier for the textarea on your page.
Alternatively, you can directly set the plugin options to any input, through HTML 5
data attributes to your input field. Note that for this case, you need to attach the CSS class markdown to the input.
As noted earlier, when initializing plugin via javascript (step 2a), you MUST NOT attach the CSS class markdown to the input.
<textarea id="editor-id" rows="15" class="markdown" data-use-twemoji="true"> </textarea>
As shown in the usage section, translations are available to set the plugin to display in your own locale. Follow these steps to enable translations for your language:
Load your language locale script file on your page from /js/locales/<lang>.js. This script must be loaded after the core markdown-editor.js file, where <lang> is the language code (e.g. de, fr etc.). If your locale file does not exist, you can create the
translations for the new language by submitting a github pull request to add to this folder. Check the sample locale
file to copy and create a translation configuration for your own language.
Configure the plugin's language property to the same language code identified by <lang> above.
The plugin has been implemented as extensions in the following frameworks
| Sl. | Framework | Extension Source | Developed By | Extension Demo |
|---|---|---|---|---|
| 1. | Yii Framework 2.0 | Yii2 Widgets | Krajee | Yii2 Markdown Editor |
Do you know any other framework extension using this plugin which is not listed here? Tell us so that we can consider its inclusion in this list.
markdown-editor is released under the BSD 3-Clause License. See the bundled LICENSE.md
for details.
Comments & Discussion
Note
You can now visit the Krajee Webtips Q & A forum for searching OR asking questions OR helping programmers with answers on these extensions and plugins. For asking a question click here. Select the appropriate question category (i.e. Krajee Plugins) and choose this current page plugin in the question related to field.
The comments and discussion section below are intended for generic discussions or feedback for this plugin. Developers may not be able to search or lookup here specific questions or tips on usage for this plugin.