Automatically convert a textarea
element to Krajee Markdown Editor widget by setting its class as
markdown
. When using this approach to initialize without any javascript, you can set the plugin options
as HTML5 data attributes to the textarea
element. For example, you can set the bsVersion property
via data-bs-version
attribute.
Use the preview mode buttons in the bottom right corner of the editor to switch between the text editor and html preview modes.
Note also that the height you set for the textarea
element will be remembered (e.g. the rows="15"
attribute setting will auto-configure the height of the editor region for the example).
The editor will automatically downgrade to a native HTML Textarea in case javascript/jquery is blocked on the
browser. Notice also the bootstrap CSS class form-control
is added to the textarea
input
element for this example. This will help handle the native textarea
display style prior to plugin
initialization.
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-b1" name="editor-b1" class="form-control markdown" rows="15" data-bs-version="4.1.1"> {RAW MARKDOWN DATA} </textarea>
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.