From d05106a0edf89e91a466cdc39ff54428523a57e6 Mon Sep 17 00:00:00 2001 From: Wes Cossick Date: Tue, 14 Jul 2015 11:52:28 -0500 Subject: [PATCH] Customize toolbar, Document this in README --- README.md | 35 ++++++++++++++++++++++++++++++++++- source files/simplemde.js | 32 ++++++++++---------------------- 2 files changed, 44 insertions(+), 23 deletions(-) diff --git a/README.md b/README.md index 906bcd0..93ea728 100644 --- a/README.md +++ b/README.md @@ -54,7 +54,7 @@ simplemde.value(); - **element**: The DOM element for the textarea to use. Defaults to the first textarea on the page. - **status**: If set to `false`, hide the status bar. Defaults to `true`. - Optionally, you can set an array of status bar elements to include, and in what order. -- **toolbar**: If set to `false`, hide the toolbar. Defaults to `true`. +- **toolbar**: If set to `false`, hide the toolbar. Defaults to the [array of icons](#toolbar-icons). - **toolbarTips**: If set to `false`, disable toolbar button tips. Defaults to `true`. - **autofocus**: If set to `true`, autofocuses the editor. Defaults to `false`. - **lineWrapping**: If set to `false`, disable line wrapping. Defaults to `true`. @@ -83,6 +83,39 @@ var simplemde = new SimpleMDE({ }); ``` +#### Toolbar icons + +Below are the available toolbar icons, which can be reorganized however you like. "Name" is just the friendly name for reference purposes. "Action" is either a function or a URL to open. "Class" is the class given to the icon. "Tooltip" is the small tooltip that appears via the `title=""` attribute. The `Ctrl` and `Alt` in the title tags will be changed automatically to their Mac equivalents when needed. Additionally, you can add a separator between any icons by adding `"|"` to the toolbar array. + +Name | Action | Class | Tooltip +---- | ------ | ----- | ----- +Bold | toggleBold | fa fa-bold | Bold (Ctrl+B) +Italic | toggleItalic | fa fa-italic | Italic (Ctrl+I) +Blockquote | toggleBlockquote | fa fa-quote-left | Quote (Ctrl+') +Unordered List | toggleUnorderedList | fa fa-list-ul | Generic List (Ctrl+L) +Numbered List | toggleOrderedList | fa fa-list-ol | Numbered List (Ctrl+Alt+L) +Link | drawLink | fa fa-link | Create Link (Ctrl+K) +Image | drawImage | fa fa-picture-o | Insert Image (Ctrl+Alt+I) +Preview | togglePreview | fa fa-eye | Toggle Preview (Ctrl+P) +Markdown Guide | http://nextstepwebs.github.io/simplemde-markdown-editor/markdown-guide | fa fa-question-circle | Markdown Guide + +Customize the toolbar using the `toolbar` option like: + +```JavaScript +var simplemde = new SimpleMDE({ + toolbar: [{ + action: toggleBold, + className: "fa fa-bold", + title: "Bold (Ctrl+B)", + }, + "|", // Separator + ... + ], +}); +``` + +#### Height + To change the minimum height (before it starts auto-growing): ```CSS diff --git a/source files/simplemde.js b/source files/simplemde.js index 07719d0..a3c3356 100644 --- a/source files/simplemde.js +++ b/source files/simplemde.js @@ -7,7 +7,7 @@ var shortcuts = { 'Cmd-Alt-I': drawImage, "Cmd-'": toggleBlockquote, 'Cmd-Alt-L': toggleOrderedList, - 'Cmd-L': toggleUnOrderedList, + 'Cmd-L': toggleUnorderedList, 'Cmd-P': togglePreview, }; @@ -42,7 +42,7 @@ function createIcon(name, options, enableTooltips) { } } - el.className = options.className || 'icon-' + name; + el.className = options.className; return el; } @@ -159,7 +159,7 @@ function toggleBlockquote(editor) { /** * Action for toggling ul. */ -function toggleUnOrderedList(editor) { +function toggleUnorderedList(editor) { var cm = editor.codemirror; _toggleLine(cm, 'unordered-list'); } @@ -392,63 +392,55 @@ function wordCount(data) { var toolbar = [{ - name: "bold", action: toggleBold, className: "fa fa-bold", title: "Bold (Ctrl+B)", }, { - name: "italic", action: toggleItalic, className: "fa fa-italic", title: "Italic (Ctrl+I)", }, "|", { - name: "quote", action: toggleBlockquote, className: "fa fa-quote-left", title: "Quote (Ctrl+')", }, { - name: "unordered-list", - action: toggleUnOrderedList, + action: toggleUnorderedList, className: "fa fa-list-ul", title: "Generic List (Ctrl+L)", }, { - name: "ordered-list", action: toggleOrderedList, className: "fa fa-list-ol", title: "Numbered List (Ctrl+Alt+L)", }, "|", { - name: "link", action: drawLink, className: "fa fa-link", title: "Create Link (Ctrl+K)", }, { - name: "image", action: drawImage, className: "fa fa-picture-o", title: "Insert Image (Ctrl+Alt+I)", }, "|", { - name: "preview", action: togglePreview, className: "fa fa-eye", title: "Toggle Preview (Ctrl+P)", }, "|", { - name: "guide", action: "http://nextstepwebs.github.io/simplemde-markdown-editor/markdown-guide", className: "fa fa-question-circle", title: "Markdown Guide", - }]; + } +]; /** * Interface of SimpleMDE. @@ -460,12 +452,8 @@ function SimpleMDE(options) { this.element = options.element; } - if(options.toolbar === false) - options.toolbar = false; - else + if (options.toolbar !== false) options.toolbar = options.toolbar || SimpleMDE.toolbar; - // you can customize toolbar with object - // [{name: 'bold', shortcut: 'Ctrl-B', className: 'icon-bold'}] if (!options.hasOwnProperty('status')) { options.status = ['autosave', 'lines', 'words', 'cursor']; @@ -723,7 +711,7 @@ SimpleMDE.prototype.value = function(val) { SimpleMDE.toggleBold = toggleBold; SimpleMDE.toggleItalic = toggleItalic; SimpleMDE.toggleBlockquote = toggleBlockquote; -SimpleMDE.toggleUnOrderedList = toggleUnOrderedList; +SimpleMDE.toggleUnorderedList = toggleUnorderedList; SimpleMDE.toggleOrderedList = toggleOrderedList; SimpleMDE.drawLink = drawLink; SimpleMDE.drawImage = drawImage; @@ -744,8 +732,8 @@ SimpleMDE.prototype.toggleItalic = function() { SimpleMDE.prototype.toggleBlockquote = function() { toggleBlockquote(this); }; -SimpleMDE.prototype.toggleUnOrderedList = function() { - toggleUnOrderedList(this); +SimpleMDE.prototype.toggleUnorderedList = function() { + toggleUnorderedList(this); }; SimpleMDE.prototype.toggleOrderedList = function() { toggleOrderedList(this);