mirror of
https://github.com/Ionaru/easy-markdown-editor
synced 2025-07-31 05:44:28 -06:00
Simplified toolbar variant
This commit is contained in:
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…
x
Reference in New Issue
Block a user