Advanced usage of the plugin to customize the display and layout of toolbar buttons. For example,the toolbarHeaderL and toolbarFooterL properties have been changed for this example to hide some of the range of buttons.
In addition, this example shows how to set the labels for few buttons via
buttonLabels. The undo
and redo
button labels have been added for this example.
Lastly, this example also shows how you can display twitter emojis instead of browser default supported emojis. For
displaying twitter emojis, set the useTwemoji property to true
. Next load the Twitter
emoji library twemoji.min.js
(from the Twitter Emojis repo) on your page. This must be loaded before the
markdown-editor.min.js
library script as depicted below:
<script src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js"></script> <-- load all the markdown editor js script after twitter emoji script --> <script src="https://cdn.jsdelivr.net/gh/kartik-v/krajee-markdown-editor@1.0.0/js/markdown-editor.min.js"></script>
Note, the demo example(s) uses:
this
as the raw input source for the markdown textarea
.
these assets loaded on the page in the order mentioned.
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)
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>
<textarea id="editor-a1" name="editor-a1" class="form-control" rows="15"> {RAW MARKDOWN DATA} </textarea> <script type="text/javascript"> $('#editor-a1').markdownEditor({ useTwemoji: true, toolbarHeaderL: [ ['undo', 'redo'], ['bold', 'italic', 'ins', 'del', 'sup', 'sub', 'mark'], ['link', 'image'], ['code', 'codeblock'], ['emoji'] ], toolbarFooterL: ['export'], buttonLabels: { undo: 'Undo', redo: 'Redo' } }); </script>
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.