mirror of
https://github.com/sparksuite/simplemde-markdown-editor.git
synced 2024-06-20 14:45:02 +02:00
Merge pull request #23 from NextStepWebs/development
Tooltips, Expanded icons, Guide, Bug fixes
This commit is contained in:
commit
148721ee1f
39
README.md
39
README.md
|
@ -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
4
simplemde.min.css
vendored
File diff suppressed because one or more lines are too long
16
simplemde.min.js
vendored
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',
|
||||
action: drawImage,
|
||||
className: "fa fa-picture-o"
|
||||
className: "fa fa-link",
|
||||
title: "Create Link (Ctrl+K)",
|
||||
},
|
||||
'|',
|
||||
|
||||
{
|
||||
name: 'preview',
|
||||
action: togglePreview,
|
||||
className: "fa fa-eye"
|
||||
name: "quote",
|
||||
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",
|
||||
}
|
||||
];
|
||||
|
||||
/**
|
||||
|
@ -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…
Reference in a new issue