Customize toolbar, Document this in README

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

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);