Simplified toolbar variant

pull/59/head
Wes Cossick 9 years ago
parent ebabe1c48b
commit ff48a879ea

@ -113,6 +113,12 @@ guide | [This link](http://nextstepwebs.github.io/simplemde-markdown-editor/mark
Customize the toolbar using the `toolbar` option like: Customize the toolbar using the `toolbar` option like:
```JavaScript ```JavaScript
// Customize only the order of existing buttons
var simplemde = new SimpleMDE({
toolbar: ["bold", "italic", "heading", "|", "quote"],
});
// Customize all information and/or add your own icons
var simplemde = new SimpleMDE({ var simplemde = new SimpleMDE({
toolbar: [{ toolbar: [{
name: "bold", name: "bold",

@ -452,66 +452,76 @@ function wordCount(data) {
} }
var toolbar = [{ var toolbarDefaults = {
"bold": {
name: "bold", name: "bold",
action: toggleBold, action: toggleBold,
className: "fa fa-bold", className: "fa fa-bold",
title: "Bold (Ctrl+B)", title: "Bold (Ctrl+B)",
}, { },
"italic": {
name: "italic", name: "italic",
action: toggleItalic, action: toggleItalic,
className: "fa fa-italic", className: "fa fa-italic",
title: "Italic (Ctrl+I)", title: "Italic (Ctrl+I)",
}, { },
name: "headingSmaller", "heading": {
name: "heading",
action: toggleHeadingSmaller, action: toggleHeadingSmaller,
className: "fa fa-header", className: "fa fa-header",
title: "Heading (Ctrl+H)", title: "Heading (Ctrl+H)",
}, },
"|", { "quote": {
name: "quote", name: "quote",
action: toggleBlockquote, action: toggleBlockquote,
className: "fa fa-quote-left", className: "fa fa-quote-left",
title: "Quote (Ctrl+')", title: "Quote (Ctrl+')",
}, { },
"unordered-list": {
name: "unordered-list", name: "unordered-list",
action: toggleUnorderedList, action: toggleUnorderedList,
className: "fa fa-list-ul", className: "fa fa-list-ul",
title: "Generic List (Ctrl+L)", title: "Generic List (Ctrl+L)",
}, { },
"ordered-list": {
name: "ordered-list", name: "ordered-list",
action: toggleOrderedList, action: toggleOrderedList,
className: "fa fa-list-ol", className: "fa fa-list-ol",
title: "Numbered List (Ctrl+Alt+L)", title: "Numbered List (Ctrl+Alt+L)",
}, },
"|", { "link": {
name: "link", name: "link",
action: drawLink, action: drawLink,
className: "fa fa-link", className: "fa fa-link",
title: "Create Link (Ctrl+K)", title: "Create Link (Ctrl+K)",
}, { },
name: "quote", "image": {
name: "image",
action: drawImage, action: drawImage,
className: "fa fa-picture-o", className: "fa fa-picture-o",
title: "Insert Image (Ctrl+Alt+I)", title: "Insert Image (Ctrl+Alt+I)",
}, },
"|", { "preview": {
name: "preview", name: "preview",
action: togglePreview, action: togglePreview,
className: "fa fa-eye", className: "fa fa-eye",
title: "Toggle Preview (Ctrl+P)", title: "Toggle Preview (Ctrl+P)",
}, { },
"fullscreen": {
name: "fullscreen", name: "fullscreen",
action: toggleFullScreen, action: toggleFullScreen,
className: "fa fa-arrows-alt", className: "fa fa-arrows-alt",
title: "Toggle Fullscreen (F11)", title: "Toggle Fullscreen (F11)",
}, { },
"guide": {
name: "guide", name: "guide",
action: "http://nextstepwebs.github.io/simplemde-markdown-editor/markdown-guide", action: "http://nextstepwebs.github.io/simplemde-markdown-editor/markdown-guide",
className: "fa fa-question-circle", className: "fa fa-question-circle",
title: "Markdown Guide", title: "Markdown Guide",
} }
]; };
var toolbar = ["bold", "italic", "heading", "|", "quote", "unordered-list", "ordered-list", "|", "link", "image", "|", "preview", "fullscreen", "guide"];
/** /**
* Interface of SimpleMDE. * Interface of SimpleMDE.
@ -685,6 +695,12 @@ SimpleMDE.prototype.createToolbar = function(items) {
if(!items || items.length === 0) { if(!items || items.length === 0) {
return; return;
} }
for(var i = 0; i < items.length; i++) {
if(toolbarDefaults[items[i]] != undefined){
items[i] = toolbarDefaults[items[i]];
}
}
var bar = document.createElement('div'); var bar = document.createElement('div');
bar.className = 'editor-toolbar'; bar.className = 'editor-toolbar';

Loading…
Cancel
Save