All the options to the krajee-markdown-editor plugin can be passed typically via the javascript object at plugin initialization. Depending on your need, these options can also be configured as HTML5 data attributes on the native file input (on which the plugin is initialized). The plugin supports the following listed options. All the plugin options/properties are listed alphabetically on this page.
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)
string | integer, the bootstrap library version you are using for rendering the markdown editor. (NOTE: This is not a plugin property but a global property setting). Bootstrap versions 3.x.x or 4.x.x or 5.x.x are supported. The plugin will auto detect the value for this based on the Bootstrap JS Library (bootstrap.min.js or bootstrap.bundle.min.js) loaded on the page. If not detected, this defaults to bootstrap 3.x.x version by default. You can set this as an integer or string between 3 and 5 (i.e. >= 3 and <= 5) and the plugin will automatically
recognize the right version. For example, any of the following values can be read by the plugin to
determine the Bootstrap version.
5.1.1
5.0
5
4.6.0
3.4.1
3.x.x
This property being a global property needs to be setup before initializing the plugin. For example:
// initialize the bs version if necessary
// (this is optional and not needed if you have bootstrap.min.js loaded
$.fn.markdownEditorBsVersion='5.1.x';
// initialize the plugin
$('#textareaId').markdownEditor({
// plugin options here
});
boolean|string, whether to merge the ajax callback functions set in
ajaxSettings with the default plugin callbacks for beforeSend,
success, error, complete. Defaults to false.
NOTE ajax configuration and settings are applicable only when you wish to convert the Markdown Content to TEXT/HTML via a server based parsing action (set via parserUrl), instead of using the markdown-it JS Library.
In addition to boolean false, the following string values can be set:
'before': when set to 'before', the ajax callbacks set in
ajaxSettings will be merged before the default plugin callback.
'after': when set to 'after', the ajax callbacks set in
ajaxSettings will be merged after the default plugin callback.
string, the error message displayed when the ajax parser call set via parserUrl encounters an error. Defaults to
Error parsing markdown text. Please try again later.
NOTE ajax configuration and settings are applicable only when you wish to convert the Markdown Content to TEXT/HTML via a server based parsing action (set via parserUrl), instead of using the markdown-it JS Library.
This property is typically overridden by the translation locale file for your language and normally does not need to be setup or changed.
string, the message displayed when the ajax parser call set via parserUrl is in progress. Defaults to
Parsing markdown text ...
NOTE ajax configuration and settings are applicable only when you wish to convert the Markdown Content to TEXT/HTML via a server based parsing action (set via parserUrl), instead of using the markdown-it JS Library.
This property is typically overridden by the translation locale file for your language and normally does not need to be setup or changed.
object additional ajax settings to pass to the plugin before submitting the ajax request for export. This is applicable only when you have set parserUrl for exporting content via a server based parsing action.
NOTE ajax configuration and settings are applicable only when you wish to convert the Markdown Content to TEXT/HTML via a server based parsing action (set via parserUrl), instead of using the markdown-it JS Library.
The ajaxSettings property can be useful to pass additional tokens to headers or one can use
it for setting other ajax options for advanced cases. Refer the
jQuery ajax documentation for the various settings you
can configure.
integer the duration in microseconds after which alerts will be faded out. Alerts are displayed
currently when error/exception is encountered during export of content via ajax submission (when
parserUrl is set) or when an exception is received when toggling to/from full screen
mode. Defaults to 2000 (i.e. 2 seconds).
string the CSS class to be applied to the alert container element. Defaults to
alert alert-danger. Alerts are displayed currently when error/exception is encountered
during parsing of content via ajax submission (when parserUrl is set) or when an
exception is received when toggling to/from full screen mode.
object | function, the configuration for the shortcut keyboard keys to access and launch the
editor toolbar buttons (as an alternative to clicking with mouse/pointer/touch). Refer the
toolbar property for arranging the buttons on the toolbar. The
buttonAccessKeys is set as key : valuepairs, where the key is
the identifier for the toolbar button, and the valueis the shortcut keyboard character,
which when pressed along with the ALT keyboard button will trigger that button click action.
For example, the undo button can be launched by pressingALT and z
keys together, and the redo button by pressingALTand y together. The
buttonAccessKeys defaults to the following setting if not set. You can choose to override
these access keys if needed OR add your own custom buttons to this list (check advanced usage demo 3 for
adding your own custom editor buttons).
buttonAccessKeys: {
undo: 'z',
redo: 'y',
bold: 'b',
italic: 'i',
ins: 'u',
del: 'x',
sup: '^',
sub: '~',
mark: '=',
paragraph: '#',
newline: '0',
heading1: '1',
heading2: '2',
heading3: '3',
heading4: '4',
heading5: '5',
heading6: '6',
link: 'l',
image: 'p',
indent: '>',
outdent: '<',
ul: '*',
ol: '9',
dl: '+',
footnote: 'n',
blockquote: 'q',
code: 'j',
codeblock: 'k',
hr: '-',
emoji: ':',
fullscreen: '.',
hint: '?',
modeEditor: '(',
modePreview: ')',
modeSplit: '_',
exportHtml: 'h',
exportText: 't'
}
The buttonAccessKeys can also be configured as a function callback where the button key is
the parameter. For example:
buttonAccessKeys: function(btn) {
if (btn === 'undo') {
return 'z';
} else {
// process for other keys
}
}
object | function, the configuration for the actions for each of the editor toolbar buttons (set
via toolbar), which will generate and render the markdown code/text when the button
is clicked. The buttonActions is set as key : value pairs, where the
key is the identifier for the toolbar button, and the value can be setup in
one of the following two ways:
as object: where the following settings are supported:
before: string, the text which will be placed before the selected
text within the editor textarea box.
after: string, the text which will be placed after the selected
text within the editor textarea box.
default: string, the default text that will be generated in case no
text is selected in the editor textarea box before clicking the button.
skipSpaces: boolean, whether to skip spaces before the selected
text when
prepending the before and to skip spaces after the selected text when
appending the after.
inline: boolean, when set to true, the markdown code
injected is rendered inline (i.e. on each line) ELSE it is treated as a block
markup and rendered before and after the block selected across lines.
For example, the bold button action uses the following setting:
bold: {before: '**', after: '**', 'default': '**(bold text here)**', skipSpaces: true}
as function: the action can be setup as a JS function callback, where the
parameter
str is the selected text in the textarea. For example, the indent
button
action uses the following function callback method to render the markdown code:
indent: function (str) {
var ind = ' ', list;
if (str.indexOf('\n') < 0) {
str = (ind + str);
} else {
list = str.split('\n');
$.each(list, function (k, v) {
list[k] = ind + v;
});
str = list.join('\n');
}
return str;
}
The buttonActions defaults to
the following setting if not set. You can choose to override these actions if needed OR add your own
custom buttons to this list (check advanced usage demo 3 for adding your own custom editor buttons).
buttonActions: {
bold: {before: '**', after: '**', 'default': '**(bold text here)**', skipSpaces: true},
italic: {before: '_', after: '_', 'default': '_(italic text here)_', skipSpaces: true},
ins: {before: '++', after: '++', 'default': '_(inserted text here)_', skipSpaces: true},
del: {before: '~~', after: '~~', 'default': '_(strikethrough text here)_', skipSpaces: true},
mark: {before: '==', after: '==', 'default': '_(marked text here)_', skipSpaces: true},
sup: {before: '^', after: '^', 'default': '_(superscript text here)_', skipSpaces: true},
sub: {before: '~', after: '~', 'default': '_(subscript text here)_', skipSpaces: true},
paragraph: {before: '\n', after: '\n', 'default': '\n(paragraph text here)\n', inline: true},
newline: {before: $h.EMPTY, after: ' '},
heading1: {before: '# ', 'default': '# (heading 1 text here)', inline: true},
heading2: {before: '## ', 'default': '## (heading 2 text here)', inline: true},
heading3: {before: '### ', 'default': '### (heading 3 text here)', inline: true},
heading4: {before: '#### ', 'default': '#### (heading 4 text here)', inline: true},
heading5: {before: '##### ', 'default': '##### (heading 5 text here)', inline: true},
heading6: {before: '###### ', 'default': '###### (heading 6 text here)', inline: true},
indent: function (str) {
var ind = ' ', list;
if (str.indexOf('\n') < 0) {
str = (ind + str);
} else {
list = str.split('\n');
$.each(list, function (k, v) {
list[k] = ind + v;
});
str = list.join('\n');
}
return str;
},
outdent: function (str) {
var ind = ' ', list;
if (str.indexOf('\n') < 0 && str.substr(0, 2) === ind) {
str = str.slice(2);
} else {
list = str.split('\n');
$.each(list, function (k, v) {
list[k] = v;
if (v.substr(0, 2) === ind) {
list[k] = v.slice(2);
}
});
str = list.join('\n');
}
return str;
},
link: function (str) {
return function (link, title) {
if (!$h.isEmpty(link)) {
if (link.substring(0, 6) !== 'ftp://' &&
link.substring(0, 7) !== 'http://' &&
link.substring(0, 8) !== 'https://') {
link = 'http://' + link;
}
str = '[' + title + '](' + link + ')';
}
return str;
};
},
image: function (str) {
return function (link, title) {
if (!$h.isEmpty(link)) {
if (link.substring(0, 6) !== 'ftp://' &&
link.substring(0, 7) !== 'http://' &&
link.substring(0, 8) !== 'https://') {
link = 'http://' + link;
}
str = '';
}
return str;
};
},
ul: {before: '- ', after: $h.EMPTY},
ol: function (str) {
var i, list;
return function (start) {
if (!$h.isEmpty(start)) {
if (!$h.isNumber(start)) {
start = 1;
}
if (str.indexOf('\n') < 0) {
str = $h.getMarkUp(str, start + '. ', $h.EMPTY);
} else {
i = parseInt(start);
list = str.split('\n');
$.each(list, function (k, v) {
list[k] = $h.getMarkUp(v, i + '. ', $h.EMPTY);
i++;
});
str = list.join('\n');
}
return str;
}
return $h.EMPTY;
};
},
dl: function (str) {
var i, j, list;
if (str.indexOf('\n') > 0) {
i = 1;
list = str.split('\n');
$.each(list, function (k, v) {
j = (i % 2 === 0) ? ': ' : $h.EMPTY;
list[k] = $h.getMarkUp(v, j, $h.EMPTY);
i++;
});
str = list.join('\n');
} else {
str = str + "\n: \n";
}
return str;
},
footnote: function (str) {
var i, tag, list, title = 'Enter footnote ', notes = $h.EMPTY;
if (str.indexOf('\n') < 0) {
notes = '[^1]: ' + title + '1\n';
str = $h.getMarkUp(str, $h.EMPTY, title + '[^1]') + "\n" + notes;
} else {
i = 1;
list = str.split('\n');
$.each(list, function (k, v) {
tag = '[^' + i + ']';
list[k] = $h.getMarkUp(v, $h.EMPTY, tag + ' ');
notes = notes + tag + ': ' + title + i + '\n';
i++;
});
str = list.join('\n') + " \n\n" + notes;
}
return str;
},
blockquote: {before: '> ', after: ' '},
code: {before: '`', after: '`', inline: true},
codeblock: function (str) {
return function (lang) {
if ($h.isEmpty(lang, true)) {
lang = $h.EMPTY;
}
return $h.getMarkUp(str, "~~~" + lang + " \n", "\n~~~ \n");
};
},
hr: {before: $h.EMPTY, after: '\n- - -', inline: true}
}
The buttonActions can also be configured as a function callback where the button key is
the parameter. For example:
buttonActions: function (btn) {
if (btn === 'bold') {
return {before: '**', after: '**', 'default': '**(bold text here)**', skipSpaces: true};
} else {
// process for other actions
}
}
object | function, the configuration for the CSS to be applied to each of the editor toolbar
buttons (set via toolbar). If not set this will default to the property
defaultButtonCss. The buttonCss is set as key : value
pairs, where the key is the identifier for the toolbar button, and the value
is the CSS class to be applied to the toolbar button. In addition, the CSS class
md-btn will be appended to all of the buttons. This setting will override the property
defaultButtonCss. Defaults to:
buttonCss: {
hint: 'btn btn-info'
}
The buttonCss can also be configured as a function callback where the button key is
the parameter. For example:
buttonCss: function (btn) {
if (btn === 'hint') {
// specific button css
return 'btn btn-info';
} else {
// other button validations
return 'btn btn-default btn-outline-secondary';
}
}
object | function, the configuration for the CSS to be applied to each button group within the
toolbar (set via toolbar). Button groups are rendered using
Bootstrap Button
Group styles. If not set this will default to the property defaultButtonGroupCss.
Normally this property is applicable for buttons that reside isolated in a separate group e.g. the
fullscreen or mode buttons. For other button groups, the
defaultButtonGroupCss property will be applied. The buttonGroupCss
can be set as an object as key : value pairs, where the key is
the identifier for the toolbar button, and the value is the CSS class to be applied to
button group. This setting will override the property defaultButtonGroupCss. The
buttonGroupCss defaults to an empty object:
buttonGroupCss: {}
The buttonGroupCss can also be configured as a function callback where the button key is
the parameter. For example:
buttonGroupCss: function (btn) {
if (btn === 'fullscreen') {
// conditionally choose if you want a different CSS class
return 'btn-group md-btn-group btn-grp-fullscreen';
} else {
// other button group validations
return 'btn-group md-btn-group';
}
}
object | function, the configuration for the text labels to be set for each button within the
toolbar (set via toolbar). The buttonLabels can be set as an
object as key : value pairs, where the key is
the identifier for the toolbar button, and the value is the text label to be set for the
button. The buttonLabels defaults to an empty object:
buttonLabels: {}
As a result, no labels are displayed for the buttons by default and only the icons are rendered within buttons using the icons property.
The buttonLabels can also be configured as a function callback where the button key is
the parameter. For example:
buttonLabels: function (btn) {
switch (btn) {
case 'undo':
return 'Undo';
case 'redo':
return 'Redo';
default:
return '';
}
}
object | function, the configuration for the prompts displayed for specific buttons,
where a modal dialog prompt is popped up for additional information. For example, this is applicable
for button actions like the link, image, ol, and
codeblock buttons within the toolbar (set via toolbar).
The buttonPrompts can be set as an object as key : value pairs,
where the key is the identifier for the toolbar button, and the value is an
object with the following properties/keys.
header: string, the header text to be displayed for the modal dialog
prompt popup
hintInput: string, the placeholder or hint text to be displayed for the
input that captures main data for processing the button action
hintTitle: string, the placeholder or hint title to be displayed for
capturing the additional supporting data for processing the button action
The buttonPrompts defaults the following setting:
buttonPrompts: {
link: {
header: 'Insert Hyperlink',
hintInput: 'Enter hyperlink address...',
hintTitle: 'Enter text for the link...'
},
image: {
header: 'Insert Image Link',
hintInput: 'Enter image link address...',
hintTitle: 'Enter alternate text for the image...'
},
ol: {
header: 'Ordered List Starting Number',
hintInput: 'Integer starting from 1'
},
codeblock: {
header: 'Enter code language',
hintInput: 'e.g. html, php, js'
}
}
The buttonPrompts can also be configured as a function callback where the button key is
the parameter. For example:
buttonPrompts: function (btn) {
if (btn === 'link') {
return {
header: 'Insert Hyperlink',
hintInput: 'Enter hyperlink address...',
hintTitle: 'Enter text for the link...'
};
} else {
// process and return for other buttons
}
}
object | function, the configuration for the titles for each button displayed on hover within the
toolbar (set via toolbar). The buttonTitles can be set as an
object as key : value pairs, where the key is
the identifier for the toolbar button, and the value is the title to be set for the
button. The buttonTitles defaults to an empty object:
buttonTitles: {
undo: 'Undo',
redo: 'Redo',
bold: 'Bold',
italic: 'Italic',
ins: 'Underline / Inserted Text',
del: 'Strike Through',
sup: 'Superscript',
sub: 'Subscript',
mark: 'Highlighted Text',
paragraph: 'Paragraph',
newline: 'Append line break',
heading: 'Heading',
link: 'Hyperlink',
image: 'Image Link',
indent: 'Indent Text',
outdent: 'Outdent Text',
ul: 'Unordered List',
ol: 'Ordered List',
dl: 'Definition List',
footnote: 'Footnote',
blockquote: 'Block Quote',
code: 'Inline Code',
codeblock: 'Code Block',
hr: 'Horizontal Line',
emoji: 'Emojis / Emoticons',
fullscreen: 'Toggle full screen mode',
hint: 'Usage Hints',
modeEditor: 'Editor mode',
modePreview: 'Preview mode',
modeSplit: 'Split mode',
export: 'Export content',
exportHtml: 'Export as HTML',
exportText: 'Export as Text'
}
This property is typically overridden by the translation locale file for your language and normally does not need to be setup or changed.
The buttonTitles can also be configured as a function callback where the button key is
the parameter. For example:
buttonTitles: function (btn) {
if (btn === 'link') {
return 'Insert hyperlink';
} else {
// validate and return for other button actions
}
}
string, the default CSS class for all toolbar buttons. This can be overridden by
buttonCss for specific buttons. Defaults to
btn btn-default btn-outline-secondary. In addition, the CSS class
md-btn will be appended to all the buttons.
string, the default CSS class for groups of buttons in the toolbar. Button groups are rendered
using Bootstrap
Button Group styles. This can be overridden by buttonGroupCss for specific
buttons which are isolated as a single button in a group. Defaults to
btn-group md-btn-group.
string, the mode to launch the markdown editor. Defaults to editor. The following
modes are supported:
editor: The editor mode identified by displays fully the editable textarea for
editing the markdown text. The HTML preview is hidden unless the user toggles the preview
buttons (on the bottom right toolbar).
preview: The preview mode identified by displays the markdown converted formatted
HTML preview tab and the editable markdown area is hidden.
split: The split mode identified by displays both the editable textarea and the HTML
preview zone side by side. It offers synchronized scrolling by default. The enableSplitMode property will control whether split mode is enabled in the plugin. The enableLivePreview setting will be applied only when one toggles to a split mode.
With enableLivePreview set to true, the preview is updated
dynamically on the FLY when the user inserts or edits text in the markdown editor textarea.
string, the text label to be shown for the Cancel button in the modal dialog prompt for
button actions like the link, image, and ol. Defaults to
Cancel. This property is typically overridden by the translation locale file for your
language and normally does not need to be setup or changed.
string, the text label to be shown for the Submit button in the modal dialog prompt for
button actions like the link, image, and ol. Defaults to
Submit. This property is typically overridden by the translation locale file for your
language and normally does not need to be setup or changed.
object, this property is applicable to the specific buttons in the toolbar that are rendered
as bootstrap
dropdowns (like the heading, emoji and export buttons
in the toolbar).
By default the dropdowns are rendered with the dropdown container dropping down below the button. The
dropUp property allows you to override this and set the dropdown to drop up above the button.
This is set as key : value pairs, where the key is
the identifier for the toolbar button, and the value is a boolean property true
or false.
The dropUp property defaults to:
dropUp: {
export: true
}
object | function, this property allows you to append your own CSS class to the default CSS
for dropdown buttons in the toolbar rendered as
bootstrap
dropdowns (like the heading, emoji, and export buttons in
the toolbar).
This is set as key : value pairs, where the key is
the identifier for the toolbar button, and the value is the CSS class that will be
appended to the default bootstrap dropdown CSS.
The dropdownCss property defaults to:
dropdownCss: {
emoji: 'md-emojies-list pull-right float-right'
}
The dropdownCss can also be configured as a function callback where the button key is
the parameter. For example:
dropdownCss: function(btn) {
if (btn === 'emoji') {
return 'md-emojies-list pull-right float-right';
} else {
// process for other keys
}
}
string, the default placeholder text to be displayed in the emoji search input control. Defaults to:
Search emojis ...
This property is typically overridden by the translation locale file for your language and normally does not need to be setup or changed.
boolean, whether to enable popup alerts when errors or exceptions are encountered during
markdown parsing and previewing OR during markdown data export. Defaults to true. If this
is set to false, no alerts will be displayed. However, the plugin does still raise events for
various errors or exceptions. Check them in the
plugin events documentation.
boolean, whether to enable escape key press to exit full screen mode. Defaults to true.
boolean, whether to enable live preview in the editor in the SPLIT mode, as you type
on the fly. This property is applicable only when you have toggled to the SPLIT preview mode, OR
the plugin defaultMode is set to split. Defaults to true.
Note that the performance of your application will have some impact (depending on the browser/client
memory) when enableLivePreview is set to true. This is because the markdown
Text to HTML conversion is done on the fly.
boolean, whether to enable synchronized scrolling for the editor and preview window in the
SPLIT mode. This property is applicable only when you have toggled to the SPLIT preview
mode, OR the plugin defaultMode is set to split. Defaults to
true.
boolean, whether to enable SPLIT mode, whereby you the widget is split into 2 equal
halves - the editor zone and the preview zone (side by side). Defaults to true.
boolean, whether to enable undo and redo functionality in the editor. This will enable the
UndoStack plugin built in as part of the extension, and allow you to undo and redo your
edits. Defaults to true.
object | function, configuration of the file types and data uri transport for export download.
This is set as key : value pairs, where the key is one of:
exportText: configuration for exporting the raw markdown text
exportHtml: configuration for exporting the markdown converted HTML
The value is set as an object containing the following keys:
ext: string, the extension for the file generated for download. Defaults to
txt for exportText and htm for exportHtml
uri: string, the data uri mime type prefix for download. Defaults to
data:text/plain;base64, for exportText and
data:text/html;base64, for exportHtml
The exportConfig defaults to:
exportConfig: {
exportText: {ext: 'txt', uri: 'data:text/plain;base64,'},
exportHtml: {ext: 'htm', uri: 'data:text/html;base64,'}
}
The exportConfig can also be configured as a JS function callback with the export button
dropdown link key as the parameter (which currently can be one of exportText or
exportHtml. For example:
exportConfig: function (key) {
if (key === 'exportHtml') {
return {ext: 'txt', uri: 'data:text/plain;base64,'};
} else {
return exportHtml: {ext: 'htm', uri: 'data:text/html;base64,'};
}
}
string, file name for the exported file generated for download (this must be set as the base
name without the extension). Defaults to export.
This property is typically overridden by the translation locale file for your language and normally does not need to be setup or changed.
string, applicable only for HTML exported content. This identifies the additional JS/CSS markup that you wish to prepend before the exported HTML markup to style your exported content. If this is not set OR is an empty string, it defaults to the following:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@{VER}/dist/css/bootstrap.min.css" rel="stylesheet">
where, {VER} is replaced with 5.1.1 for bootstrap 5.x versions set via
$.fn.markdownEditorBsVersion or with 4.6.0 for bootstrap 4.x.x version or
3.4.1 for bootstrap 3.x.x versions. You can choose
to override this setting to render your own style/script markups in the output before the HTML content.
Note that this property is used by default within the exportCssJs setting within
templates. You can control which JS and CSS exactly gets loaded by configuring
templates['export'] as per your need.
NOTE that the exported output HTML does not include any code syntax highlighting library like
highlight.js. You may need to include any such JS/CSS if needed within the
exportPrependCssJs property.
string, this property is applicable only when you have set export
action via the exportUrl property. The plugin in this case internally renders an
export form to submit it to the exportUrl server action to process the export
content for download. This defaults to an empty string. If set to empty, the default export method in
the plugin is used whereby the plugin uses data URI JS method to trigger download without any server code
dependency.
string | function, this property is applicable only when you have set export action via the
exportUrl property. The plugin in this case internally renders an export form to
submit it to the exportUrl server action to process the export content for download. The
exportUrlAddlData determines additional data inputs markup (typically hidden inputs) that
you want to submit with the export form. This is different than the default export method in the plugin
which uses the data URI JS method to download without exportUrl or server code dependency.
The exportUrlAddlData property maybe useful to pass extra tokens / CSRF to your server
request. For example:
exportUrlAddlData: '<input type="hidden" name="_csrf" value="_CSRF_TOKEN">'
The exportUrlAddlData can also be configured as a JS function callback to return data at
runtime. For example:
exportUrlAddlData: function () {
return '<input type="hidden" name="_csrf" value="_CSRF_TOKEN">';
}
string, this property is applicable only when you have set export action via the
exportUrl property. The plugin in this case internally renders an
export form to submit it to the exportUrl server action to process the export
content for download. The exportUrlMethod configures this export form's method which will be
used to submit the data to exportUrl. Defaults to post.
object | function, the configuration for the icons markup rendered for each of the editor
toolbar buttons (set via toolbar property). The icons property is set
as key : value pairs, where the key is the identifier for the toolbar button,
and the value is the icon markup. You can choose to override these icons if needed OR add
your own custom buttons to this list (check advanced usage demo 3 for adding your own custom editor buttons).
Note that this property is typically overridden by themes. You can check the Font Awesome 4 BS3 theme demo for
understanding how to use different icons with different themes. The icons property defaults
to following setting (assuming Font Awesome 5.x icon library CSS is loaded on your page).
icons: {
undo: '<span class="fas fa-fw fa-undo"></span>',
redo: '<span class="fas fa-fw fa-redo"></span>',
bold: '<span class="fas fa-fw fa-bold"></span>',
italic: '<span class="fas fa-fw fa-italic"></span>',
ins: '<span class="fas fa-fw fa-underline"></span>',
del: '<span class="fas fa-fw fa-strikethrough"></span>',
sup: '<span class="fas fa-fw fa-superscript"></span>',
sub: '<span class="fas fa-fw fa-subscript"></span>',
mark: '<span class="fas fa-fw fa-eraser"></span>',
paragraph: '<span class="fas fa-fw fa-paragraph"></span>',
newline: '<span class="fas fa-fw fa-text-height"></span>',
heading: '<span class="fas fa-fw fa-heading"></span>',
link: '<span class="fas fa-fw fa-link"></span>',
image: '<span class="far fa-fw fa-image"></span>',
indent: '<span class="fas fa-fw fa-indent"></span>',
outdent: '<span class="fas fa-fw fa-outdent"></span>',
ul: '<span class="fas fa-fw fa-list-ul"></span>',
ol: '<span class="fas fa-fw fa-list-ol"></span>',
dl: '<span class="fas fa-fw fa-th-list"></span>',
footnote: '<span class="far fa-fw fa-sticky-note"></span>',
blockquote: '<span class="fas fa-fw fa-quote-right"></span>',
code: '<span class="fas fa-fw fa-code"></span>',
codeblock: '<span class="far fa-fw fa-file-code"></span>',
hr: '<span class="fas fa-fw fa-minus"></span>',
emoji: '<span class="far fa-fw fa-smile"></span>',
fullscreen: '<span class="fas fa-fw fa-arrows-alt"></span>',
minscreen: '<span class="fas fa-fw fa-compress"></span>',
hint: '<span class="fas fa-fw fa-lightbulb"></span>',
modePreview: '<span class="fas fa-fw fa-search"></span>',
modeEditor: '<span class="fas fa-fw fa-edit"></span>',
modeSplit: '<span class="fas fa-fw fa-arrows-alt-h"></span>',
export: '<span class="fas fa-fw fa-download"></span>',
exportHtml: '<span class="fas fa-fw fa-file-alt"></span>',
exportText: '<span class="fas fa-fw fa-file"></span>',
alertMsg: '<span class="fas fa-fw fa-exclamation-circle"></span>',
dialogCancel: '<span class="fas fa-fw fa-times"></span>',
dialogSubmit: '<span class="fas fa-fw fa-check"></span>'
}
The icons can also be configured as a function callback where the button key is
the parameter. For example:
icons: function(btn) {
if (btn === 'undo') {
return '<span class="fas fa-fw fa-undo"></span>';
} else {
// process for other keys
}
}
string, CSS class to be appended to the editable textarea input. Defaults to
md-input. You can change it only if you wish to override your own styles.
string, language configuration for the plugin to enable the plugin to display messages for your
locale (you must set the ISO code for the language). You can have multiple language widgets on the same
page. The locale JS file for the language code must be defined as mentioned in the
translations section. The file must
be loaded after markdown-editor.js.
string, the message to show when content is loading in the preview as markdown parsing is in progress.
Defaults to Loading ....
This property is typically overridden by the translation locale file for your language and normally does not need to be setup or changed.
array, the list of markdown-it library rule names that should be disabled during plugin initialization. By default all the
rules are enabled as this defaults to an empty array [].
For example, to disable the link and image rules on init of the markdown editor, you can set this to:
markdownItDisabledRules: [
'link',
'image'
]
object, the plugin options for the markdown-it library. Refer the markdown-it API documentation for the various markdown-it plugin options supported.
The markdownItOptions defaults to the following setting. Note, how the highlight
setting is set as a callback to perform code syntax highlighting by default using the
highlightjs library.
markdownItOptions: {
html: false,
xhtmlOut: true,
breaks: true,
linkify: true,
typographer: true,
highlight: function (code) {
return window.hljs ? window.hljs.highlightAuto(code).value : code;
}
}
object, the markdown-it library plugins that will be enabled. This is setup as key: value pairs, where
the key corresponds to the markdown-it plugin name and the value corresponds to the plugin's settings.
Refer the markdown-it API documentation
for configuring and using markdown-it plugins.
The markdownItPlugins defaults to the following setting and the plugins included here are also bundled along with krajee-markdown-editor. More plugins are available as contributions by community and can also be included as mentioned in markdown-it documentation.
markdownItPlugins: {
markdownitDeflist: {},
markdownitFootnote: {},
markdownitAbbr: {},
markdownitEmoji: {},
markdownitSub: {},
markdownitSup: {},
markdownitMark: {},
markdownitIns: {},
markdownitSmartArrows: {},
markdownitCheckbox: {
divWrap: true,
divClass: 'form-check checkbox',
idPrefix: 'cbx_'
},
markdownitCjkBreaks: {}
}
string, the message displayed when an invalid export configuration is found. An invalid export configuration can occur in one of the following ways:
your browser does not support binary encoding of strings (using btoa) for data uri based download.
you have set the exportUrl to use a server based export/download action but you have not setup a valid exportUrlMethod.
Defaults to:
Export processor unavailable. Please contact the system administrator.
This property is typically overridden by the translation locale file for your language and normally does not need to be setup or changed.
string, the message displayed when both parserUrl and parserMethod are invalid or empty and user tries to access the preview.
Defaults to:
Markdown preview processor unavailable. Please contact the system administrator.
This property is typically overridden by the translation locale file for your language and normally does not need to be setup or changed.
integer, the output parsing timeout in milliseconds beyond which the plugin will abort trying to generate the output and render the preview.
Defaults to 1800000 ms (i.e. 30 min).
function, the callback method used for parsing the raw markdown data and converting to / rendering the formatted HTML.
Defaults to the following callback using the markdown-it library. The input parameter data for the callback will be the
raw unformatted text input.
function (data) {
md.renderer.rules.emoji = function (token, idx) {
// `self.useTwemoji` corresponds to the `useTwemoji` option setting
return self.useTwemoji && window.twemoji ? window.twemoji.parse(token[idx].content) :
'' + token[idx].content + '';
};
md.renderer.rules.paragraph_open = md.renderer.rules.heading_open =
function (tokens, idx, options, env, slf) {
var line;
if (tokens[idx].map && tokens[idx].level === 0) {
line = tokens[idx].map[0];
tokens[idx].attrJoin('class', 'md-line');
tokens[idx].attrSet('data-line', String(line));
}
return slf.renderToken(tokens, idx, options, env, slf);
};
return md.render(data);
};
string, the URL for markdown parsing and conversion if you wish to use a server based Markdown Parser (instead of the markdown-it client library) that will be called via AJAX. If this property is set, this will take precedence over the parserMethod setting. Defaults to null or empty. When this is set, the server URL will receive the raw unformatted data as parameter via POST as a JSON object format {source: '<raw data>'}. Notice the source key in the JSON object format sent to the server. The server URL must respond back with the markdown processed/converted HTML (string).
object | function, post processing markdown to HTML conversions that will be done after the markdown parser has finished conversion. This can be setup as an object of key: value pairs where the key corresponds to the string in the content to be replaced, and the value corresponds to the replaced/converted HTML string. This defaults to:
postProcess: {
'<table>': '<table class="table table-bordered table-striped">',
'<pre>': '<pre class="md-codeblock">',
'<blockquote>': '<blockquote class="blockquote md-blockquote">',
'<input type="checkbox"': '<input type="checkbox" class="form-check-input"',
'<label for="cbx': '<label class="form-check-label" for="cbx'
}
This can also be setup as a function or callback which will receive the parameter data
and convert it into a post processed HTML. For example:
function(data) {
switch (data) {
case '<table>':
return '<table class="table table-bordered table-striped">';
case '<pre>':
return '<pre class="md-codeblock">';
default:
// return anything else
}
}
string, the message title/heading displayed when a preview error is encountered.
Defaults to:
Preview Error
This property is typically overridden by the translation locale file for your language and normally does not need to be setup or changed.
array, the list of button keys that will be visible in preview mode. All buttons other than these will be hidden in preview mode.
Defaults to:
['hint', 'fullscreen', 'mode', 'export']
string, the message title/heading displayed when the preview mode is toggled/enabled.
Defaults to:
Preview Mode
This property is typically overridden by the translation locale file for your language and normally does not need to be setup or changed.
string, the message displayed in the preview box while the markdown conversion is in progress for preview.
Defaults to:
Generating preview ...
This property is typically overridden by the translation locale file for your language and normally does not need to be setup or changed.
boolean, whether to purify the HTML after markdown conversion before preview. This is important when allowing html input within the markdownItOptions. In that case you must purify the HTML output to prevent XSS vulnerabilities.
The purify.min.js is 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.
Defaults to true.
boolean, whether to open the editor in full screen mode on initialization. Defaults to false.
object | function, the configuration of markup of all templates provided in the plugin. This can be setup as an object of key: value pairs where the key corresponds to the template name and the value corresponds to the HTML markup. This defaults to the following setting:
templates: {
main: '<div class="md-editor" tabindex="0">\n' +
' {HEADER}\n' +
' <table class="md-input-preview">\n' +
' <tr>\n' +
' <td class="md-input-cell">{INPUT}</td>\n' +
' <td class="md-preview-cell">{PREVIEW}</td>\n' +
' </tr>' +
' </table>\n' +
' {FOOTER}\n' +
' {DIALOG}\n' +
'</div>',
header: '<div class="md-header">\n' +
' <div class="md-toolbar-header-r pull-right float-right">\n' +
' {TOOLBAR_HEADER_R}\n' +
' </div>\n' +
' <div class="md-toolbar-header-l">\n' +
' {TOOLBAR_HEADER_L}\n' +
' </div>\n' +
' <div class="clearfix">\n' +
' </div>\n' +
'</div>',
preview: '<div class="md-preview" tabindex="0">\n</div>',
footer: '<div class="md-footer">\n' +
' <div class="md-toolbar-footer-r pull-right float-right">\n' +
' {TOOLBAR_FOOTER_R}\n' +
' </div>\n' +
' <div class="md-toolbar-footer-l">\n' +
' {TOOLBAR_FOOTER_L}\n' +
' </div>\n' +
' <div class="clearfix">\n' +
' </div>\n' +
'</div>',
dialog: '<div class="md-dialog modal fade" tabindex="-1" role="dialog">\n' +
' <div class="modal-dialog">\n' +
' <div class="modal-content">\n' +
' <div class="modal-header">\n' +
' {HEADER}\n' +
' </div>\n' +
' <div class="modal-body">\n' +
' <input class="md-dialog-input form-control">\n' +
' <input class="md-dialog-title form-control">\n' +
' <div class="md-dialog-content"></div>\n' +
' </div>\n' +
' <div class="modal-footer">\n' +
' <button type="button" class="md-dialog-cancel btn btn-default btn-outline-secondary" data-dismiss="modal">\n' +
' {DIALOG_CANCEL_ICON} {DIALOG_CANCEL_TEXT}\n' +
' </button>\n' +
' <button type="button" class="md-dialog-submit btn btn-primary" data-dismiss="modal">\n' +
' {DIALOG_SUBMIT_ICON} {DIALOG_SUBMIT_TEXT}\n' +
' </button>\n' +
' </div>\n' +
' </div>\n' +
'</div>',
dialogClose: '<button type="button" class="close" data-dismiss="modal" aria-label="Close">\n' +
' <span aria-hidden="true">×</span>\n' +
'</button>\n',
htmlMeta: '<!DOCTYPE html>\n' +
' <meta http-equiv="Content-Type" content="text/html,charset=UTF-8"/>\n' +
' <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>\n',
exportCssJs: '{EXPORT_PREPEND_CSS_JS}\n' +
'<style>\n' +
' body{margin:20px;padding:20px;border:1px solid #ddd;border-radius:5px;}\n' +
' .md-codeblock{padding:5px 8px;background-color:#f5f5f5;border:1px solid #ddd;border-radius:0}\n' +
' .md-blockquote{border-left:5px solid #eee;padding: 10px 20px}\n' +
' .md-line img{max-width:100%}\n' +
'</style>',
exportHeader: '> - - -\n' +
'> Markdown Export\n' +
'> ==============\n' +
'> *Generated {TODAY} by {CREDITS}*\n' +
'> - - -\n\n',
hint: '<ul>\n' +
' <li><p>You may follow the {LINK_CM} specification (generated via {LINK_MI} plugin) for writing your markdown text.</p></li>\n' +
' <li><p>In order to use the formatting buttons on the toolbar, you generally need to highlight a text ' +
' within the editor on which the formatting is to be applied. You can also undo the format action on the ' +
' highlighted text by clicking the button again (for most buttons).</p></li>\n' +
' <li><p>Keyboard access shortcuts for buttons:</p>' +
' {ACCESS_KEYS}' +
' </li>\n' +
'</ul>'
}
This can also be setup as a function or callback which will receive the parameter key as input
and return a HTML markup for the template key. For example:
function(data) {
switch (data) {
case 'main':
return '<div class="md-editor" tabindex="0">\n' +
' {HEADER}\n' +
' <table class="md-input-preview">\n' +
' <tr>\n' +
' <td class="md-input-cell">{INPUT}</td>\n' +
' <td class="md-preview-cell">{PREVIEW}</td>\n' +
' </tr>' +
' </table>\n' +
' {FOOTER}\n' +
' {DIALOG}\n' +
'</div>';
default:
// return anything else
}
}
The following tokens in braces will be automatically parsed and replaced in the templates:
{HEADER}: will be replaced with header setting in templates.
{PREVIEW}: will be replaced with preview setting in templates.
{FOOTER}: will be replaced with footer setting in templates.
{DIALOG}: will be replaced with dialog setting in templates.
{INPUT}: will be replaced with the rendered markdown editor input.
{TOOLBAR_HEADER_L}: will be replaced with the rendered left toolbar as set in toolbarHeaderL.
{TOOLBAR_HEADER_R}: will be replaced with the rendered right toolbar as set in toolbarHeaderR.
{TOOLBAR_FOOTER_L}: will be replaced with the rendered left toolbar as set in toolbarHeaderL.
{TOOLBAR_FOOTER_R}: will be replaced with the rendered right toolbar as set in toolbarHeaderR.
{DIALOG_CANCEL_ICON}: will be replaced with dialogCancel setting in icons.
{DIALOG_SUBMIT_ICON}: will be replaced with dialogSubmit setting in icons.
{DIALOG_CANCEL_TEXT}: will be replaced with dialogCancelText.
{DIALOG_SUBMIT_TEXT}: will be replaced with dialogSubmitText.
{EXPORT_PREPEND_CSS_JS}: will be replaced with exportPrependCssJs.
{TODAY}: will be replaced with today setting or if that is undefined - it will default to current date and time.
{CREDITS}: will be replaced with:
<a class="text-info" href="http://plugins.krajee.com/markdown-editor">krajee-markdown-editor</a>
{LINK_CM}: will be replaced with:
<a href="http://spec.commonmark.org/" target="_blank">CommonMark</a>
{LINK_MI}: will be replaced with:
<a href="https://markdown-it.github.io/markdown-it/" target="_blank">markdown-it</a>
{ACCESS_KEYS}: will be replaced with rendered HTML grid markup of button access keys using the buttonAccessKeys and buttonTitles settings.
string, theme to use for the plugin (will default to the inbuilt fa5 theme if not
set). To setup and use a theme, follow these simple steps:
Load respective theme JS file(s) that you need (e.g. themes/fa4/theme.js for Font
Awesome 4 theme). The theme file(s) must be loaded after the markdown-editor.js.
Set the theme property in the plugin to the theme you need and which you have setup
in your theme configuration JS file above (e.g. 'fa4').
The plugin will automatically read the theme configuration for the theme name from $markdown-editorThemes['<theme-name>']
from the JS file (e.g. via $markdown-editorThemes['<theme-name>']).
The plugin will automatically also prepend the CSS selector theme-<theme-name> to
the file input container, so that you can override your styles. The CSS for such themes can be
submitted by community in themes/THEME_NAME folder of the repo.
You can additionally load any theme specific CSS files if needed.
fa4, fa5 themes. More advanced themes may be
added in future or can be contributed here by the community.
string, the value for date and time that will replace the {TODAY} token in the templates. If
not set, this will default to current date and time.
array, the list of button keys that will be displayed on the toolbar starting at the right end of the footer. Note that you must set this up as a multi dimensional array (where each a separator will be displayed after each sub array of buttons).
Defaults to the following setting:
toolbarFooterR: [
['mode']
]
array, the list of button keys that will be displayed on the toolbar starting at the left end of the footer. Note that you must set this up as a multi dimensional array (where each a separator will be displayed after each sub array of buttons).
Defaults to the following setting:
toolbarFooterL: [
['hint'],
['export']
]
array, the list of button keys that will be displayed on the toolbar starting at the right end of the header. Note that you must set this up as a multi dimensional array (where each a separator will be displayed after each sub array of buttons).
Defaults to the following setting:
toolbarHeaderR: [
['fullscreen']
]
array, the list of button keys that will be displayed on the toolbar starting at the left end of the header. Note that you must set this up as a multi dimensional array (where each a separator will be displayed after each sub array of buttons).
Defaults to the following setting:
toolbarHeaderL: [
['undo', 'redo'],
['bold', 'italic', 'ins', 'del', 'sup', 'sub', 'mark'],
['paragraph', 'newline', 'heading'],
['link', 'image'],
['indent', 'outdent', 'ul', 'ol', 'dl'],
['footnote', 'blockquote', 'hr'],
['code', 'codeblock'],
['emoji']
]
boolean, whether to use and enable twitter emojis in markdown-it plugin. List of twitter emojis available can be previewed here. Defaults to false.
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.