|
|
@ -94,7 +94,7 @@ function fixShortcut(name) {
|
|
|
|
/**
|
|
|
|
/**
|
|
|
|
* Create icon element for toolbar.
|
|
|
|
* Create icon element for toolbar.
|
|
|
|
*/
|
|
|
|
*/
|
|
|
|
function createIcon(options, enableTooltips, shortcuts) {
|
|
|
|
function createIcon(options, enableTooltips, shortcuts, iconsSet) {
|
|
|
|
options = options || {};
|
|
|
|
options = options || {};
|
|
|
|
var el = document.createElement("button");
|
|
|
|
var el = document.createElement("button");
|
|
|
|
enableTooltips = (enableTooltips == undefined) ? true : enableTooltips;
|
|
|
|
enableTooltips = (enableTooltips == undefined) ? true : enableTooltips;
|
|
|
@ -109,7 +109,10 @@ function createIcon(options, enableTooltips, shortcuts) {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
el.tabIndex = -1;
|
|
|
|
el.tabIndex = -1;
|
|
|
|
el.className = options.className;
|
|
|
|
el.className = options.className[iconsSet || "fa"];
|
|
|
|
|
|
|
|
if(options.textContent) {
|
|
|
|
|
|
|
|
el.textContent = options.textContent[iconsSet || "fa"];
|
|
|
|
|
|
|
|
}
|
|
|
|
return el;
|
|
|
|
return el;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
@ -1105,58 +1108,112 @@ var toolbarBuiltInButtons = {
|
|
|
|
"bold": {
|
|
|
|
"bold": {
|
|
|
|
name: "bold",
|
|
|
|
name: "bold",
|
|
|
|
action: toggleBold,
|
|
|
|
action: toggleBold,
|
|
|
|
className: "fa fa-bold",
|
|
|
|
className: {
|
|
|
|
|
|
|
|
fa: "fa fa-bold",
|
|
|
|
|
|
|
|
material: "material-icons"
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
textContent: {
|
|
|
|
|
|
|
|
material: "format_bold"
|
|
|
|
|
|
|
|
},
|
|
|
|
title: "Bold",
|
|
|
|
title: "Bold",
|
|
|
|
default: true
|
|
|
|
default: true
|
|
|
|
},
|
|
|
|
},
|
|
|
|
"italic": {
|
|
|
|
"italic": {
|
|
|
|
name: "italic",
|
|
|
|
name: "italic",
|
|
|
|
action: toggleItalic,
|
|
|
|
action: toggleItalic,
|
|
|
|
className: "fa fa-italic",
|
|
|
|
className: {
|
|
|
|
|
|
|
|
fa: "fa fa-italic",
|
|
|
|
|
|
|
|
material: "material-icons"
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
textContent: {
|
|
|
|
|
|
|
|
material: "format_italic"
|
|
|
|
|
|
|
|
},
|
|
|
|
title: "Italic",
|
|
|
|
title: "Italic",
|
|
|
|
default: true
|
|
|
|
default: true
|
|
|
|
},
|
|
|
|
},
|
|
|
|
"strikethrough": {
|
|
|
|
"strikethrough": {
|
|
|
|
name: "strikethrough",
|
|
|
|
name: "strikethrough",
|
|
|
|
action: toggleStrikethrough,
|
|
|
|
action: toggleStrikethrough,
|
|
|
|
className: "fa fa-strikethrough",
|
|
|
|
className: {
|
|
|
|
|
|
|
|
fa: "fa fa-strikethrough",
|
|
|
|
|
|
|
|
material: "material-icons"
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
textContent: {
|
|
|
|
|
|
|
|
material: "format_strikethrough"
|
|
|
|
|
|
|
|
},
|
|
|
|
title: "Strikethrough"
|
|
|
|
title: "Strikethrough"
|
|
|
|
},
|
|
|
|
},
|
|
|
|
"heading": {
|
|
|
|
"heading": {
|
|
|
|
name: "heading",
|
|
|
|
name: "heading",
|
|
|
|
action: toggleHeadingSmaller,
|
|
|
|
action: toggleHeadingSmaller,
|
|
|
|
className: "fa fa-header",
|
|
|
|
className: {
|
|
|
|
|
|
|
|
fa: "fa fa-header",
|
|
|
|
|
|
|
|
material: "material-icons"
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
textContent: {
|
|
|
|
|
|
|
|
material: "title"
|
|
|
|
|
|
|
|
},
|
|
|
|
title: "Heading",
|
|
|
|
title: "Heading",
|
|
|
|
default: true
|
|
|
|
default: true
|
|
|
|
},
|
|
|
|
},
|
|
|
|
"heading-smaller": {
|
|
|
|
"heading-smaller": {
|
|
|
|
name: "heading-smaller",
|
|
|
|
name: "heading-smaller",
|
|
|
|
action: toggleHeadingSmaller,
|
|
|
|
action: toggleHeadingSmaller,
|
|
|
|
className: "fa fa-header fa-header-x fa-header-smaller",
|
|
|
|
className: {
|
|
|
|
|
|
|
|
fa: "fa fa-header fa-header-x fa-header-smaller",
|
|
|
|
|
|
|
|
material: "material-icons md-18"
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
textContent: {
|
|
|
|
|
|
|
|
material: "title"
|
|
|
|
|
|
|
|
},
|
|
|
|
title: "Smaller Heading"
|
|
|
|
title: "Smaller Heading"
|
|
|
|
},
|
|
|
|
},
|
|
|
|
"heading-bigger": {
|
|
|
|
"heading-bigger": {
|
|
|
|
name: "heading-bigger",
|
|
|
|
name: "heading-bigger",
|
|
|
|
action: toggleHeadingBigger,
|
|
|
|
action: toggleHeadingBigger,
|
|
|
|
className: "fa fa-header fa-header-x fa-header-bigger",
|
|
|
|
className: {
|
|
|
|
|
|
|
|
fa: "fa fa-header fa-header-x fa-header-bigger",
|
|
|
|
|
|
|
|
material: "material-icons md-36"
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
textContent: {
|
|
|
|
|
|
|
|
material: "title"
|
|
|
|
|
|
|
|
},
|
|
|
|
title: "Bigger Heading"
|
|
|
|
title: "Bigger Heading"
|
|
|
|
},
|
|
|
|
},
|
|
|
|
"heading-1": {
|
|
|
|
"heading-1": {
|
|
|
|
name: "heading-1",
|
|
|
|
name: "heading-1",
|
|
|
|
action: toggleHeading1,
|
|
|
|
action: toggleHeading1,
|
|
|
|
className: "fa fa-header fa-header-x fa-header-1",
|
|
|
|
className: {
|
|
|
|
|
|
|
|
fa: "fa fa-header fa-header-x fa-header-1",
|
|
|
|
|
|
|
|
material: "material-icons md-18"
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
textContent: {
|
|
|
|
|
|
|
|
material: "title"
|
|
|
|
|
|
|
|
},
|
|
|
|
title: "Big Heading"
|
|
|
|
title: "Big Heading"
|
|
|
|
},
|
|
|
|
},
|
|
|
|
"heading-2": {
|
|
|
|
"heading-2": {
|
|
|
|
name: "heading-2",
|
|
|
|
name: "heading-2",
|
|
|
|
action: toggleHeading2,
|
|
|
|
action: toggleHeading2,
|
|
|
|
className: "fa fa-header fa-header-x fa-header-2",
|
|
|
|
className: {
|
|
|
|
|
|
|
|
fa: "fa fa-header fa-header-x fa-header-2",
|
|
|
|
|
|
|
|
material: "material-icons md-24"
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
textContent: {
|
|
|
|
|
|
|
|
material: "title"
|
|
|
|
|
|
|
|
},
|
|
|
|
title: "Medium Heading"
|
|
|
|
title: "Medium Heading"
|
|
|
|
},
|
|
|
|
},
|
|
|
|
"heading-3": {
|
|
|
|
"heading-3": {
|
|
|
|
name: "heading-3",
|
|
|
|
name: "heading-3",
|
|
|
|
action: toggleHeading3,
|
|
|
|
action: toggleHeading3,
|
|
|
|
className: "fa fa-header fa-header-x fa-header-3",
|
|
|
|
className: {
|
|
|
|
|
|
|
|
fa: "fa fa-header fa-header-x fa-header-3",
|
|
|
|
|
|
|
|
material: "material-icons md-36"
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
textContent: {
|
|
|
|
|
|
|
|
material: "title"
|
|
|
|
|
|
|
|
},
|
|
|
|
title: "Small Heading"
|
|
|
|
title: "Small Heading"
|
|
|
|
},
|
|
|
|
},
|
|
|
|
"separator-1": {
|
|
|
|
"separator-1": {
|
|
|
@ -1165,34 +1222,64 @@ var toolbarBuiltInButtons = {
|
|
|
|
"code": {
|
|
|
|
"code": {
|
|
|
|
name: "code",
|
|
|
|
name: "code",
|
|
|
|
action: toggleCodeBlock,
|
|
|
|
action: toggleCodeBlock,
|
|
|
|
className: "fa fa-code",
|
|
|
|
className: {
|
|
|
|
|
|
|
|
fa: "fa fa-code",
|
|
|
|
|
|
|
|
material: "material-icons"
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
textContent: {
|
|
|
|
|
|
|
|
material: "code"
|
|
|
|
|
|
|
|
},
|
|
|
|
title: "Code"
|
|
|
|
title: "Code"
|
|
|
|
},
|
|
|
|
},
|
|
|
|
"quote": {
|
|
|
|
"quote": {
|
|
|
|
name: "quote",
|
|
|
|
name: "quote",
|
|
|
|
action: toggleBlockquote,
|
|
|
|
action: toggleBlockquote,
|
|
|
|
className: "fa fa-quote-left",
|
|
|
|
className: {
|
|
|
|
|
|
|
|
fa: "fa fa-quote-left",
|
|
|
|
|
|
|
|
material: "material-icons"
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
textContent: {
|
|
|
|
|
|
|
|
material: "format_quote"
|
|
|
|
|
|
|
|
},
|
|
|
|
title: "Quote",
|
|
|
|
title: "Quote",
|
|
|
|
default: true
|
|
|
|
default: true
|
|
|
|
},
|
|
|
|
},
|
|
|
|
"unordered-list": {
|
|
|
|
"unordered-list": {
|
|
|
|
name: "unordered-list",
|
|
|
|
name: "unordered-list",
|
|
|
|
action: toggleUnorderedList,
|
|
|
|
action: toggleUnorderedList,
|
|
|
|
className: "fa fa-list-ul",
|
|
|
|
className: {
|
|
|
|
|
|
|
|
fa: "fa fa-list-ul",
|
|
|
|
|
|
|
|
material: "material-icons"
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
textContent: {
|
|
|
|
|
|
|
|
material: "format_list_bulleted"
|
|
|
|
|
|
|
|
},
|
|
|
|
title: "Generic List",
|
|
|
|
title: "Generic List",
|
|
|
|
default: true
|
|
|
|
default: true
|
|
|
|
},
|
|
|
|
},
|
|
|
|
"ordered-list": {
|
|
|
|
"ordered-list": {
|
|
|
|
name: "ordered-list",
|
|
|
|
name: "ordered-list",
|
|
|
|
action: toggleOrderedList,
|
|
|
|
action: toggleOrderedList,
|
|
|
|
className: "fa fa-list-ol",
|
|
|
|
className: {
|
|
|
|
|
|
|
|
fa: "fa fa-list-ol",
|
|
|
|
|
|
|
|
material: "material-icons"
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
textContent: {
|
|
|
|
|
|
|
|
material: "format_list_numbered"
|
|
|
|
|
|
|
|
},
|
|
|
|
title: "Numbered List",
|
|
|
|
title: "Numbered List",
|
|
|
|
default: true
|
|
|
|
default: true
|
|
|
|
},
|
|
|
|
},
|
|
|
|
"clean-block": {
|
|
|
|
"clean-block": {
|
|
|
|
name: "clean-block",
|
|
|
|
name: "clean-block",
|
|
|
|
action: cleanBlock,
|
|
|
|
action: cleanBlock,
|
|
|
|
className: "fa fa-eraser fa-clean-block",
|
|
|
|
className: {
|
|
|
|
|
|
|
|
fa: "fa fa-eraser fa-clean-block",
|
|
|
|
|
|
|
|
material: "material-icons"
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
textContent: {
|
|
|
|
|
|
|
|
material: "backspace"
|
|
|
|
|
|
|
|
},
|
|
|
|
title: "Clean block"
|
|
|
|
title: "Clean block"
|
|
|
|
},
|
|
|
|
},
|
|
|
|
"separator-2": {
|
|
|
|
"separator-2": {
|
|
|
@ -1201,27 +1288,51 @@ var toolbarBuiltInButtons = {
|
|
|
|
"link": {
|
|
|
|
"link": {
|
|
|
|
name: "link",
|
|
|
|
name: "link",
|
|
|
|
action: drawLink,
|
|
|
|
action: drawLink,
|
|
|
|
className: "fa fa-link",
|
|
|
|
className: {
|
|
|
|
|
|
|
|
fa: "fa fa-link",
|
|
|
|
|
|
|
|
material: "material-icons"
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
textContent: {
|
|
|
|
|
|
|
|
material: "insert_link"
|
|
|
|
|
|
|
|
},
|
|
|
|
title: "Create Link",
|
|
|
|
title: "Create Link",
|
|
|
|
default: true
|
|
|
|
default: true
|
|
|
|
},
|
|
|
|
},
|
|
|
|
"image": {
|
|
|
|
"image": {
|
|
|
|
name: "image",
|
|
|
|
name: "image",
|
|
|
|
action: drawImage,
|
|
|
|
action: drawImage,
|
|
|
|
className: "fa fa-picture-o",
|
|
|
|
className: {
|
|
|
|
|
|
|
|
fa: "fa fa-picture-o",
|
|
|
|
|
|
|
|
material: "material-icons"
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
textContent: {
|
|
|
|
|
|
|
|
material: "insert_photo"
|
|
|
|
|
|
|
|
},
|
|
|
|
title: "Insert Image",
|
|
|
|
title: "Insert Image",
|
|
|
|
default: true
|
|
|
|
default: true
|
|
|
|
},
|
|
|
|
},
|
|
|
|
"table": {
|
|
|
|
"table": {
|
|
|
|
name: "table",
|
|
|
|
name: "table",
|
|
|
|
action: drawTable,
|
|
|
|
action: drawTable,
|
|
|
|
className: "fa fa-table",
|
|
|
|
className: {
|
|
|
|
|
|
|
|
fa: "fa fa-table",
|
|
|
|
|
|
|
|
material: "material-icons"
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
textContent: {
|
|
|
|
|
|
|
|
material: "table_chart"
|
|
|
|
|
|
|
|
},
|
|
|
|
title: "Insert Table"
|
|
|
|
title: "Insert Table"
|
|
|
|
},
|
|
|
|
},
|
|
|
|
"horizontal-rule": {
|
|
|
|
"horizontal-rule": {
|
|
|
|
name: "horizontal-rule",
|
|
|
|
name: "horizontal-rule",
|
|
|
|
action: drawHorizontalRule,
|
|
|
|
action: drawHorizontalRule,
|
|
|
|
className: "fa fa-minus",
|
|
|
|
className: {
|
|
|
|
|
|
|
|
fa: "fa fa-minus",
|
|
|
|
|
|
|
|
material: "material-icons"
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
textContent: {
|
|
|
|
|
|
|
|
material: "power_input"
|
|
|
|
|
|
|
|
},
|
|
|
|
title: "Insert Horizontal Line"
|
|
|
|
title: "Insert Horizontal Line"
|
|
|
|
},
|
|
|
|
},
|
|
|
|
"separator-3": {
|
|
|
|
"separator-3": {
|
|
|
@ -1230,21 +1341,39 @@ var toolbarBuiltInButtons = {
|
|
|
|
"preview": {
|
|
|
|
"preview": {
|
|
|
|
name: "preview",
|
|
|
|
name: "preview",
|
|
|
|
action: togglePreview,
|
|
|
|
action: togglePreview,
|
|
|
|
className: "fa fa-eye no-disable",
|
|
|
|
className: {
|
|
|
|
|
|
|
|
fa: "fa fa-eye no-disable",
|
|
|
|
|
|
|
|
material: "material-icons"
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
textContent: {
|
|
|
|
|
|
|
|
material: "remove_red_eye"
|
|
|
|
|
|
|
|
},
|
|
|
|
title: "Toggle Preview",
|
|
|
|
title: "Toggle Preview",
|
|
|
|
default: true
|
|
|
|
default: true
|
|
|
|
},
|
|
|
|
},
|
|
|
|
"side-by-side": {
|
|
|
|
"side-by-side": {
|
|
|
|
name: "side-by-side",
|
|
|
|
name: "side-by-side",
|
|
|
|
action: toggleSideBySide,
|
|
|
|
action: toggleSideBySide,
|
|
|
|
className: "fa fa-columns no-disable no-mobile",
|
|
|
|
className: {
|
|
|
|
|
|
|
|
fa: "fa fa-columns no-disable no-mobile",
|
|
|
|
|
|
|
|
material: "material-icons no-disable no-mobile"
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
textContent: {
|
|
|
|
|
|
|
|
material: "vertical_split"
|
|
|
|
|
|
|
|
},
|
|
|
|
title: "Toggle Side by Side",
|
|
|
|
title: "Toggle Side by Side",
|
|
|
|
default: true
|
|
|
|
default: true
|
|
|
|
},
|
|
|
|
},
|
|
|
|
"fullscreen": {
|
|
|
|
"fullscreen": {
|
|
|
|
name: "fullscreen",
|
|
|
|
name: "fullscreen",
|
|
|
|
action: toggleFullScreen,
|
|
|
|
action: toggleFullScreen,
|
|
|
|
className: "fa fa-arrows-alt no-disable no-mobile",
|
|
|
|
className: {
|
|
|
|
|
|
|
|
fa: "fa fa-arrows-alt no-disable no-mobile",
|
|
|
|
|
|
|
|
material: "material-icons no-disable no-mobile"
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
textContent: {
|
|
|
|
|
|
|
|
material: "fullscreen"
|
|
|
|
|
|
|
|
},
|
|
|
|
title: "Toggle Fullscreen",
|
|
|
|
title: "Toggle Fullscreen",
|
|
|
|
default: true
|
|
|
|
default: true
|
|
|
|
},
|
|
|
|
},
|
|
|
@ -1254,7 +1383,13 @@ var toolbarBuiltInButtons = {
|
|
|
|
"guide": {
|
|
|
|
"guide": {
|
|
|
|
name: "guide",
|
|
|
|
name: "guide",
|
|
|
|
action: "https://simplemde.com/markdown-guide",
|
|
|
|
action: "https://simplemde.com/markdown-guide",
|
|
|
|
className: "fa fa-question-circle",
|
|
|
|
className: {
|
|
|
|
|
|
|
|
fa: "fa fa-question-circle",
|
|
|
|
|
|
|
|
material: "material-icons"
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
textContent: {
|
|
|
|
|
|
|
|
material: "help"
|
|
|
|
|
|
|
|
},
|
|
|
|
title: "Markdown Guide",
|
|
|
|
title: "Markdown Guide",
|
|
|
|
default: true
|
|
|
|
default: true
|
|
|
|
},
|
|
|
|
},
|
|
|
@ -1264,13 +1399,25 @@ var toolbarBuiltInButtons = {
|
|
|
|
"undo": {
|
|
|
|
"undo": {
|
|
|
|
name: "undo",
|
|
|
|
name: "undo",
|
|
|
|
action: undo,
|
|
|
|
action: undo,
|
|
|
|
className: "fa fa-undo no-disable",
|
|
|
|
className: {
|
|
|
|
|
|
|
|
fa: "fa fa-undo no-disable",
|
|
|
|
|
|
|
|
material: "material-icons no-disable"
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
textContent: {
|
|
|
|
|
|
|
|
material: "undo"
|
|
|
|
|
|
|
|
},
|
|
|
|
title: "Undo"
|
|
|
|
title: "Undo"
|
|
|
|
},
|
|
|
|
},
|
|
|
|
"redo": {
|
|
|
|
"redo": {
|
|
|
|
name: "redo",
|
|
|
|
name: "redo",
|
|
|
|
action: redo,
|
|
|
|
action: redo,
|
|
|
|
className: "fa fa-repeat no-disable",
|
|
|
|
className: {
|
|
|
|
|
|
|
|
fa: "fa fa-repeat no-disable",
|
|
|
|
|
|
|
|
material: "material-icons no-disable"
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
textContent: {
|
|
|
|
|
|
|
|
material: "redo"
|
|
|
|
|
|
|
|
},
|
|
|
|
title: "Redo"
|
|
|
|
title: "Redo"
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
};
|
|
|
@ -1755,7 +1902,7 @@ SimpleMDE.prototype.createToolbar = function(items) {
|
|
|
|
if(item === "|") {
|
|
|
|
if(item === "|") {
|
|
|
|
el = createSep();
|
|
|
|
el = createSep();
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
el = createIcon(item, self.options.toolbarTips, self.options.shortcuts);
|
|
|
|
el = createIcon(item, self.options.toolbarTips, self.options.shortcuts, self.options.iconsSet);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// bind events, special for info
|
|
|
|
// bind events, special for info
|
|
|
|