Using the Font Awesome 4
theme with Bootstrap version 3.3.7
(you need to load the Bootstrap version 3.3.7
CSS and JS assets on your page. You need to set the bsVersion property to 3.3.7
. For this example, the toolbarHeaderR has been set to an empty array to hide the full screen toggle mode button.
Next, set the theme property to fa4
. You need to then load the respective theme assets (JS/CSS) for the theme file
after your markdown-editor CSS/JS scripts. You also need the Font Awesome icons for fa4
loaded on your page. For example:
<-- load your font awesome icons for Font Awesome 4 --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <-- load the theme js script after markdown-editor.min.js --> <script src="https://cdn.jsdelivr.net/gh/kartik-v/krajee-markdown-editor@1.0.0/js/themes/fa4/theme.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-fa4-bs3" name="editor-fa4-bs3" class="form-control" rows="15"> {RAW MARKDOWN DATA} </textarea> <script type="text/javascript"> $('#editor-fa4-bs3').markdownEditor({ theme: 'fa4', bsVersion: '3.3.7', toolbarHeaderR: [] }); </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.