Merge pull request #23 from NextStepWebs/development

Tooltips, Expanded icons, Guide, Bug fixes
pull/75/head 1.3.0
Wes Cossick 9 years ago
commit 148721ee1f

@ -54,7 +54,9 @@ 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`.
- **toolbarGuideIcon**: If set to `false`, disable guide icon in the toolbar. 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`.
- **indentWithTabs**: If set to `false`, indent using spaces instead of tabs. Defaults to `true`.
@ -82,6 +84,41 @@ 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)
Code | toggleCodeBlock | fa fa-code | Code (Ctrl+Alt+C)
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)
Horizontal Rule | drawHorizontalRule | fa fa-minus | Insert Horizontal Line
Preview | togglePreview | fa fa-eye | Toggle Preview (Ctrl+P)
Markdown Guide | [This link](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

4
simplemde.min.css vendored

File diff suppressed because one or more lines are too long

16
simplemde.min.js vendored

File diff suppressed because one or more lines are too long

@ -7,7 +7,9 @@ var shortcuts = {
'Cmd-Alt-I': drawImage,
"Cmd-'": toggleBlockquote,
'Cmd-Alt-L': toggleOrderedList,
'Cmd-L': toggleUnOrderedList
'Cmd-L': toggleUnorderedList,
'Cmd-Alt-C': toggleCodeBlock,
'Cmd-P': togglePreview,
};
@ -27,21 +29,21 @@ function fixShortcut(name) {
/**
* Create icon element for toolbar.
*/
function createIcon(name, options) {
function createIcon(options, enableTooltips) {
options = options || {};
var el = document.createElement('a');
var shortcut = options.shortcut || shortcuts[name];
if (shortcut) {
shortcut = fixShortcut(shortcut);
el.title = shortcut;
el.title = el.title.replace('Cmd', '⌘');
enableTooltips = (enableTooltips == undefined) ? true : enableTooltips;
if (options.title && enableTooltips) {
el.title = options.title;
if (isMac) {
el.title = el.title.replace('Ctrl', '⌘');
el.title = el.title.replace('Alt', '⌥');
}
}
el.className = options.className || 'icon-' + name;
el.className = options.className;
return el;
}
@ -158,7 +160,7 @@ function toggleBlockquote(editor) {
/**
* Action for toggling ul.
*/
function toggleUnOrderedList(editor) {
function toggleUnorderedList(editor) {
var cm = editor.codemirror;
_toggleLine(cm, 'unordered-list');
}
@ -193,6 +195,16 @@ function drawImage(editor) {
}
/**
* Action for drawing a horizontal rule.
*/
function drawHorizontalRule(editor) {
var cm = editor.codemirror;
var stat = getState(cm);
_replaceSelection(cm, stat.image, '', '\n\n-----\n\n');
}
/**
* Undo action.
*/
@ -391,47 +403,62 @@ function wordCount(data) {
var toolbar = [{
name: 'bold',
name: "bold",
action: toggleBold,
className: "fa fa-bold"
}, {
name: 'italic',
className: "fa fa-bold",
title: "Bold (Ctrl+B)",
},
{
name: "italic",
action: toggleItalic,
className: "fa fa-italic"
className: "fa fa-italic",
title: "Italic (Ctrl+I)",
},
'|',
"|",
{
name: 'quote',
name: "quote",
action: toggleBlockquote,
className: "fa fa-quote-left"
}, {
name: 'unordered-list',
action: toggleUnOrderedList,
className: "fa fa-list-ul"
}, {
name: 'ordered-list',
className: "fa fa-quote-left",
title: "Quote (Ctrl+')",
},
{
name: "unordered-list",
action: toggleUnorderedList,
className: "fa fa-list-ul",
title: "Generic List (Ctrl+L)",
},
{
name: "ordered-list",
action: toggleOrderedList,
className: "fa fa-list-ol"
className: "fa fa-list-ol",
title: "Numbered List (Ctrl+Alt+L)",
},
'|',
"|",
{
name: 'link',
name: "link",
action: drawLink,
className: "fa fa-link"
}, {
name: 'image',
className: "fa fa-link",
title: "Create Link (Ctrl+K)",
},
{
name: "quote",
action: drawImage,
className: "fa fa-picture-o"
className: "fa fa-picture-o",
title: "Insert Image (Ctrl+Alt+I)",
},
'|',
"|",
{
name: 'preview',
name: "preview",
action: togglePreview,
className: "fa fa-eye"
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",
}
];
/**
@ -444,12 +471,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'];
@ -597,14 +620,15 @@ SimpleMDE.prototype.createToolbar = function(items) {
self.toolbar = {};
for (var i = 0; i < items.length; i++) {
if(items[i].name == "guide" && self.options.toolbarGuideIcon === false)
continue;
(function(item) {
var el;
if (item.name) {
el = createIcon(item.name, item);
} else if (item === '|') {
if (item === '|') {
el = createSep();
} else {
el = createIcon(item);
el = createIcon(item, self.options.toolbarTips);
}
// bind events, special for info
@ -707,10 +731,12 @@ SimpleMDE.prototype.value = function(val) {
SimpleMDE.toggleBold = toggleBold;
SimpleMDE.toggleItalic = toggleItalic;
SimpleMDE.toggleBlockquote = toggleBlockquote;
SimpleMDE.toggleUnOrderedList = toggleUnOrderedList;
SimpleMDE.toggleCodeBlock = toggleCodeBlock;
SimpleMDE.toggleUnorderedList = toggleUnorderedList;
SimpleMDE.toggleOrderedList = toggleOrderedList;
SimpleMDE.drawLink = drawLink;
SimpleMDE.drawImage = drawImage;
SimpleMDE.drawHorizontalRule = drawHorizontalRule;
SimpleMDE.undo = undo;
SimpleMDE.redo = redo;
SimpleMDE.togglePreview = togglePreview;
@ -728,8 +754,11 @@ SimpleMDE.prototype.toggleItalic = function() {
SimpleMDE.prototype.toggleBlockquote = function() {
toggleBlockquote(this);
};
SimpleMDE.prototype.toggleUnOrderedList = function() {
toggleUnOrderedList(this);
SimpleMDE.prototype.toggleCodeBlock = function() {
toggleCodeBlock(this);
};
SimpleMDE.prototype.toggleUnorderedList = function() {
toggleUnorderedList(this);
};
SimpleMDE.prototype.toggleOrderedList = function() {
toggleOrderedList(this);
@ -740,6 +769,9 @@ SimpleMDE.prototype.drawLink = function() {
SimpleMDE.prototype.drawImage = function() {
drawImage(this);
};
SimpleMDE.prototype.drawHorizontalRule = function() {
drawHorizontalRule(this);
};
SimpleMDE.prototype.undo = function() {
undo(this);
};

@ -470,6 +470,6 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
}
.CodeMirror .CodeMirror-code .cm-comment {
background: #eee;
background: rgba(0, 0, 0, .05);
border-radius: 2px;
}
Loading…
Cancel
Save