mirror of
https://github.com/sparksuite/simplemde-markdown-editor.git
synced 2024-05-17 21:26:38 +02:00
Included info on configuring and using custom keyboard shortcuts
This commit is contained in:
parent
b61c64d63c
commit
131e5d8beb
79
README.md
79
README.md
|
@ -95,6 +95,7 @@ simplemde.value("This text will appear in the editor");
|
|||
- **renderingConfig**: Adjust settings for parsing the Markdown during previewing (not editing).
|
||||
- **singleLineBreaks**: If set to `false`, disable parsing GFM single line breaks. Defaults to `true`.
|
||||
- **codeSyntaxHighlighting**: If set to `true`, will highlight using [highlight.js](https://github.com/isagalaev/highlight.js). Defaults to `false`. To use this feature you must include highlight.js on your page. For example, include the script and the CSS files like:<br>`<script src="https://cdn.jsdelivr.net/highlight.js/latest/highlight.min.js"></script>`<br>`<link rel="stylesheet" href="https://cdn.jsdelivr.net/highlight.js/latest/styles/github.min.css">`
|
||||
- **shortcuts**: Keyboard shortcuts associated with this instance. Defaults to the [array of shortcuts](#keyboard-shortcuts).
|
||||
- **showIcons**: An array of icon names to show. Can be used to show specific icons hidden by default without completely customizing the toolbar.
|
||||
- **spellChecker**: If set to `false`, disable the spell checker. Defaults to `true`.
|
||||
- **status**: If set to `false`, hide the status bar. Defaults to `true`.
|
||||
|
@ -140,13 +141,16 @@ var simplemde = new SimpleMDE({
|
|||
setTimeout(function(){
|
||||
preview.innerHTML = customMarkdownParser(plainText);
|
||||
}, 250);
|
||||
|
||||
|
||||
return "Loading...";
|
||||
},
|
||||
renderingConfig: {
|
||||
singleLineBreaks: false,
|
||||
codeSyntaxHighlighting: true,
|
||||
},
|
||||
shortcuts: {
|
||||
drawTable: "Cmd-Alt-T"
|
||||
},
|
||||
showIcons: ["code", "table"],
|
||||
spellChecker: false,
|
||||
status: false,
|
||||
|
@ -159,31 +163,33 @@ var simplemde = new SimpleMDE({
|
|||
|
||||
#### Toolbar icons
|
||||
|
||||
Below are the built-in toolbar icons (only some of which are enabled by default), which can be reorganized however you like. "Name" is the name of the icon, referenced in the JS. "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. Any `Ctrl` or `Alt` in the title tags will be converted automatically to their Mac equivalents when needed. Additionally, you can add a separator between any icons by adding `"|"` to the toolbar array.
|
||||
Below are the built-in toolbar icons (only some of which are enabled by default), which can be reorganized however you like. "Name" is the name of the icon, referenced in the JS. "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. Note that shortcut hints are added automatically and reflect the specified "action" if it has a keybind assigned to it (ie. with the value of "action" set to `bold` and that of "tootip" set to "Bold", the final text the user will see - assuming the default shortcuts are unchanged - would be "Bold (Ctrl-B)").
|
||||
|
||||
Additionally, you can add a separator between any icons by adding `"|"` to the toolbar array.
|
||||
|
||||
Name | Action | Tooltip<br>Class
|
||||
:--- | :----- | :--------------
|
||||
bold | toggleBold | Bold (Ctrl+B)<br>fa fa-bold
|
||||
italic | toggleItalic | Italic (Ctrl+I)<br>fa fa-italic
|
||||
bold | toggleBold | Bold<br>fa fa-bold
|
||||
italic | toggleItalic | Italic<br>fa fa-italic
|
||||
strikethrough | toggleStrikethrough | Strikethrough<br>fa fa-strikethrough
|
||||
heading | toggleHeadingSmaller | Heading (Ctrl+H)<br>fa fa-header
|
||||
heading-smaller | toggleHeadingSmaller | Smaller Heading (Ctrl+H)<br>fa fa-header
|
||||
heading-bigger | toggleHeadingBigger | Bigger Heading (Shift+Ctrl+H)<br>fa fa-lg fa-header
|
||||
heading | toggleHeadingSmaller | Heading<br>fa fa-header
|
||||
heading-smaller | toggleHeadingSmaller | Smaller Heading<br>fa fa-header
|
||||
heading-bigger | toggleHeadingBigger | Bigger Heading<br>fa fa-lg fa-header
|
||||
heading-1 | toggleHeading1 | Big Heading<br>fa fa-header fa-header-x fa-header-1
|
||||
heading-2 | toggleHeading2 | Medium Heading<br>fa fa-header fa-header-x fa-header-2
|
||||
heading-3 | toggleHeading3 | Small Heading<br>fa fa-header fa-header-x fa-header-3
|
||||
code | toggleCodeBlock | Code (Ctrl+Alt+C)<br>fa fa-code
|
||||
quote | toggleBlockquote | Quote (Ctrl+')<br>fa fa-quote-left
|
||||
unordered-list | toggleUnorderedList | Generic List (Ctrl+L)<br>fa fa-list-ul
|
||||
ordered-list | toggleOrderedList | Numbered List (Ctrl+Alt+L)<br>fa fa-list-ol
|
||||
clean-block | cleanBlock | Clean block (Ctrl+E)<br>fa fa-eraser fa-clean-block
|
||||
link | drawLink | Create Link (Ctrl+K)<br>fa fa-link
|
||||
image | drawImage | Insert Image (Ctrl+Alt+I)<br>fa fa-picture-o
|
||||
code | toggleCodeBlock | Code<br>fa fa-code
|
||||
quote | toggleBlockquote | Quote<br>fa fa-quote-left
|
||||
unordered-list | toggleUnorderedList | Generic List<br>fa fa-list-ul
|
||||
ordered-list | toggleOrderedList | Numbered List<br>fa fa-list-ol
|
||||
clean-block | cleanBlock | Clean block<br>fa fa-eraser fa-clean-block
|
||||
link | drawLink | Create Link<br>fa fa-link
|
||||
image | drawImage | Insert Image<br>fa fa-picture-o
|
||||
table | drawTable | Insert Table<br>fa fa-table
|
||||
horizontal-rule | drawHorizontalRule | Insert Horizontal Line<br>fa fa-minus
|
||||
preview | togglePreview | Toggle Preview (Ctrl+P)<br>fa fa-eye no-disable
|
||||
side-by-side | toggleSideBySide | Toggle Side by Side (F9)<br>fa fa-columns no-disable no-mobile
|
||||
fullscreen | toggleFullScreen | Toggle Fullscreen (F11)<br>fa fa-arrows-alt no-disable no-mobile
|
||||
preview | togglePreview | Toggle Preview<br>fa fa-eye no-disable
|
||||
side-by-side | toggleSideBySide | Toggle Side by Side<br>fa fa-columns no-disable no-mobile
|
||||
fullscreen | toggleFullScreen | Toggle Fullscreen<br>fa fa-arrows-alt no-disable no-mobile
|
||||
guide | [This link](http://nextstepwebs.github.io/simplemde-markdown-editor/markdown-guide) | Markdown Guide<br>fa fa-question-circle
|
||||
|
||||
Customize the toolbar using the `toolbar` option like:
|
||||
|
@ -200,7 +206,7 @@ var simplemde = new SimpleMDE({
|
|||
name: "bold",
|
||||
action: SimpleMDE.toggleBold,
|
||||
className: "fa fa-bold",
|
||||
title: "Bold (Ctrl+B)",
|
||||
title: "Bold",
|
||||
},
|
||||
{
|
||||
name: "custom",
|
||||
|
@ -216,6 +222,43 @@ var simplemde = new SimpleMDE({
|
|||
});
|
||||
```
|
||||
|
||||
#### Keyboard shortcuts
|
||||
|
||||
SimpleMDE comes with an array of predefined keyboard shortcuts, but they can be altered with a configuration option. The list of default ones is as follows:
|
||||
|
||||
Shortcut | Action
|
||||
:------- | :-----
|
||||
*Cmd-'* | "toggleBlockquote"
|
||||
*Cmd-B* | "toggleBold"
|
||||
*Cmd-E* | "cleanBlock"
|
||||
*Cmd-H* | "toggleHeadingSmaller"
|
||||
*Cmd-I* | "toggleItalic"
|
||||
*Cmd-K* | "drawLink"
|
||||
*Cmd-L* | "toggleUnorderedList"
|
||||
*Cmd-P* | "togglePreview"
|
||||
*Cmd-Alt-C* | "toggleCodeBlock"
|
||||
*Cmd-Alt-I* | "drawImage"
|
||||
*Cmd-Alt-L* | "toggleOrderedList"
|
||||
*Shift-Cmd-H* | "toggleHeadingBigger"
|
||||
*F9* | "toggleSideBySide"
|
||||
*F11* | "toggleFullScreen"
|
||||
|
||||
Here is how you can change a few, while leaving others untouched:
|
||||
|
||||
```JavaScript
|
||||
var simplemde = new SimpleMDE({
|
||||
shortcuts: {
|
||||
"toggleOrderedList": "Ctrl-Alt-K", // alter the shortcut for toggleOrderedList
|
||||
"toggleCodeBlock": null, // unbind Ctrl-Alt-C
|
||||
"drawTable": "Cmd-Alt-T" // bind Cmd-Alt-T to drawTable action, which doesn't come with a default shortcut
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
Shortcuts are automatically converted between platforms. If you define a shortcut as "Cmd-B", on PC that shortcut will be changed to "Ctrl-B". Conversely, a shortcut defined as "Ctrl-I" will become "Cmd-I" in a browser of a Mac user.
|
||||
|
||||
The list of actions that can be bound is the same as the list of built-in actions available for [toolbar buttons](#toolbar-icons).
|
||||
|
||||
#### Height
|
||||
|
||||
To change the minimum height (before it starts auto-growing):
|
||||
|
|
16
dist/simplemde.min.js
vendored
16
dist/simplemde.min.js
vendored
File diff suppressed because one or more lines are too long
|
@ -16,7 +16,7 @@ var marked = require("marked");
|
|||
// Some variables
|
||||
var isMac = /Mac/.test(navigator.platform);
|
||||
|
||||
// Mapping of actions that can be bound to keyboard shortcuts
|
||||
// Mapping of actions that can be bound to keyboard shortcuts or toolbar buttons
|
||||
var bindings = {
|
||||
"toggleBold": toggleBold,
|
||||
"toggleItalic": toggleItalic,
|
||||
|
@ -29,10 +29,17 @@ var bindings = {
|
|||
"toggleUnorderedList": toggleUnorderedList,
|
||||
"toggleCodeBlock": toggleCodeBlock,
|
||||
"togglePreview": togglePreview,
|
||||
// the two below are handled manually during SimpleMDE's initialization
|
||||
// phase and the null value tells the bootstrapper to skip them
|
||||
"toggleSideBySide": null,
|
||||
"toggleFullScreen": null
|
||||
"toggleStrikethrough": toggleStrikethrough,
|
||||
"toggleHeading1": toggleHeading1,
|
||||
"toggleHeading2": toggleHeading2,
|
||||
"toggleHeading3": toggleHeading3,
|
||||
"cleanBlock": cleanBlock,
|
||||
"drawTable": drawTable,
|
||||
"drawHorizontalRule": drawHorizontalRule,
|
||||
"undo": undo,
|
||||
"redo": redo,
|
||||
"toggleSideBySide": toggleSideBySide,
|
||||
"toggleFullScreen": toggleFullScreen
|
||||
};
|
||||
|
||||
var shortcuts = {
|
||||
|
@ -41,7 +48,7 @@ var shortcuts = {
|
|||
"drawLink": "Cmd-K",
|
||||
"toggleHeadingSmaller": "Cmd-H",
|
||||
"toggleHeadingBigger": "Shift-Cmd-H",
|
||||
cleanBlock: "Cmd-E",
|
||||
"cleanBlock": "Cmd-E",
|
||||
"drawImage": "Cmd-Alt-I",
|
||||
"toggleBlockquote": "Cmd-'",
|
||||
"toggleOrderedList": "Cmd-Alt-L",
|
||||
|
@ -52,6 +59,15 @@ var shortcuts = {
|
|||
"toggleFullScreen": "F11"
|
||||
};
|
||||
|
||||
var getBindingName = function(f) {
|
||||
for(var key in bindings) {
|
||||
if(bindings[key] === f) {
|
||||
return key;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
var isMobile = function() {
|
||||
var check = false;
|
||||
(function(a) {
|
||||
|
@ -83,11 +99,7 @@ function createIcon(options, enableTooltips, shortcuts) {
|
|||
enableTooltips = (enableTooltips == undefined) ? true : enableTooltips;
|
||||
|
||||
if(options.title && enableTooltips) {
|
||||
el.title = options.title[0];
|
||||
|
||||
if(shortcuts[options.title[1]]) {
|
||||
el.title = options.title[0] + " (" + fixShortcut(shortcuts[options.title[1]]) + ")";
|
||||
}
|
||||
el.title = createTootlip(options.title, options.action, shortcuts);
|
||||
|
||||
if(isMac) {
|
||||
el.title = el.title.replace("Ctrl", "⌘");
|
||||
|
@ -107,6 +119,19 @@ function createSep() {
|
|||
return el;
|
||||
}
|
||||
|
||||
function createTootlip(title, action, shortcuts) {
|
||||
var actionName;
|
||||
var tooltip = title;
|
||||
|
||||
if(action) {
|
||||
actionName = getBindingName(action);
|
||||
if(shortcuts[actionName]) {
|
||||
tooltip += " (" + fixShortcut(shortcuts[actionName]) + ")";
|
||||
}
|
||||
}
|
||||
|
||||
return tooltip;
|
||||
}
|
||||
|
||||
/**
|
||||
* The state of CodeMirror at the given position.
|
||||
|
@ -736,58 +761,58 @@ var toolbarBuiltInButtons = {
|
|||
name: "bold",
|
||||
action: toggleBold,
|
||||
className: "fa fa-bold",
|
||||
title: ["Bold", "toggleBold"],
|
||||
title: "Bold",
|
||||
default: true
|
||||
},
|
||||
"italic": {
|
||||
name: "italic",
|
||||
action: toggleItalic,
|
||||
className: "fa fa-italic",
|
||||
title: ["Italic", "toggleItalic"],
|
||||
title: "Italic",
|
||||
default: true
|
||||
},
|
||||
"strikethrough": {
|
||||
name: "strikethrough",
|
||||
action: toggleStrikethrough,
|
||||
className: "fa fa-strikethrough",
|
||||
title: ["Strikethrough", "toggleStrikethrough"]
|
||||
title: "Strikethrough"
|
||||
},
|
||||
"heading": {
|
||||
name: "heading",
|
||||
action: toggleHeadingSmaller,
|
||||
className: "fa fa-header",
|
||||
title: ["Heading", "toggleHeadingSmaller"],
|
||||
title: "Heading",
|
||||
default: true
|
||||
},
|
||||
"heading-smaller": {
|
||||
name: "heading-smaller",
|
||||
action: toggleHeadingSmaller,
|
||||
className: "fa fa-header fa-header-x fa-header-smaller",
|
||||
title: ["Smaller Heading", "toggleHeadingSmaller"]
|
||||
title: "Smaller Heading"
|
||||
},
|
||||
"heading-bigger": {
|
||||
name: "heading-bigger",
|
||||
action: toggleHeadingBigger,
|
||||
className: "fa fa-header fa-header-x fa-header-bigger",
|
||||
title: ["Bigger Heading", "toggleHeadingBigger"]
|
||||
title: "Bigger Heading"
|
||||
},
|
||||
"heading-1": {
|
||||
name: "heading-1",
|
||||
action: toggleHeading1,
|
||||
className: "fa fa-header fa-header-x fa-header-1",
|
||||
title: ["Big Heading", "toggleHeading1"]
|
||||
title: "Big Heading"
|
||||
},
|
||||
"heading-2": {
|
||||
name: "heading-2",
|
||||
action: toggleHeading2,
|
||||
className: "fa fa-header fa-header-x fa-header-2",
|
||||
title: ["Medium Heading", "toggleHeading2"]
|
||||
title: "Medium Heading"
|
||||
},
|
||||
"heading-3": {
|
||||
name: "heading-3",
|
||||
action: toggleHeading3,
|
||||
className: "fa fa-header fa-header-x fa-header-3",
|
||||
title: ["Small Heading", "toggleHeading3"]
|
||||
title: "Small Heading"
|
||||
},
|
||||
"separator-1": {
|
||||
name: "separator-1"
|
||||
|
@ -796,34 +821,34 @@ var toolbarBuiltInButtons = {
|
|||
name: "code",
|
||||
action: toggleCodeBlock,
|
||||
className: "fa fa-code",
|
||||
title: ["Code", "toggleCodeBlock"]
|
||||
title: "Code"
|
||||
},
|
||||
"quote": {
|
||||
name: "quote",
|
||||
action: toggleBlockquote,
|
||||
className: "fa fa-quote-left",
|
||||
title: ["Quote", "toggleBlockquote"],
|
||||
title: "Quote",
|
||||
default: true
|
||||
},
|
||||
"unordered-list": {
|
||||
name: "unordered-list",
|
||||
action: toggleUnorderedList,
|
||||
className: "fa fa-list-ul",
|
||||
title: ["Generic List", "toggleUnorderedList"],
|
||||
title: "Generic List",
|
||||
default: true
|
||||
},
|
||||
"ordered-list": {
|
||||
name: "ordered-list",
|
||||
action: toggleOrderedList,
|
||||
className: "fa fa-list-ol",
|
||||
title: ["Numbered List", "toggleOrderedList"],
|
||||
title: "Numbered List",
|
||||
default: true
|
||||
},
|
||||
"clean-block": {
|
||||
name: "clean-block",
|
||||
action: cleanBlock,
|
||||
className: "fa fa-eraser fa-clean-block",
|
||||
title: "Clean block (Ctrl+E)"
|
||||
title: "Clean block"
|
||||
},
|
||||
"separator-2": {
|
||||
name: "separator-2"
|
||||
|
@ -832,27 +857,27 @@ var toolbarBuiltInButtons = {
|
|||
name: "link",
|
||||
action: drawLink,
|
||||
className: "fa fa-link",
|
||||
title: ["Create Link", "drawLink"],
|
||||
title: "Create Link",
|
||||
default: true
|
||||
},
|
||||
"image": {
|
||||
name: "image",
|
||||
action: drawImage,
|
||||
className: "fa fa-picture-o",
|
||||
title: ["Insert Image", "drawImage"],
|
||||
title: "Insert Image",
|
||||
default: true
|
||||
},
|
||||
"table": {
|
||||
name: "table",
|
||||
action: drawTable,
|
||||
className: "fa fa-table",
|
||||
title: ["Insert Table", "drawTable"]
|
||||
title: "Insert Table"
|
||||
},
|
||||
"horizontal-rule": {
|
||||
name: "horizontal-rule",
|
||||
action: drawHorizontalRule,
|
||||
className: "fa fa-minus",
|
||||
title: ["Insert Horizontal Line", "drawHorizontalRule"]
|
||||
title: "Insert Horizontal Line"
|
||||
},
|
||||
"separator-3": {
|
||||
name: "separator-3"
|
||||
|
@ -861,28 +886,28 @@ var toolbarBuiltInButtons = {
|
|||
name: "preview",
|
||||
action: togglePreview,
|
||||
className: "fa fa-eye no-disable",
|
||||
title: ["Toggle Preview", "togglePreview"],
|
||||
title: "Toggle Preview",
|
||||
default: true
|
||||
},
|
||||
"side-by-side": {
|
||||
name: "side-by-side",
|
||||
action: toggleSideBySide,
|
||||
className: "fa fa-columns no-disable no-mobile",
|
||||
title: ["Toggle Side by Side", "toggleSideBySide"],
|
||||
title: "Toggle Side by Side",
|
||||
default: true
|
||||
},
|
||||
"fullscreen": {
|
||||
name: "fullscreen",
|
||||
action: toggleFullScreen,
|
||||
className: "fa fa-arrows-alt no-disable no-mobile",
|
||||
title: ["Toggle Fullscreen", "toggleFullScreen"],
|
||||
title: "Toggle Fullscreen",
|
||||
default: true
|
||||
},
|
||||
"guide": {
|
||||
name: "guide",
|
||||
action: "http://nextstepwebs.github.io/simplemde-markdown-editor/markdown-guide",
|
||||
className: "fa fa-question-circle",
|
||||
title: ["Markdown Guide", null],
|
||||
title: "Markdown Guide",
|
||||
default: true
|
||||
},
|
||||
"separator-4": {
|
||||
|
@ -892,13 +917,13 @@ var toolbarBuiltInButtons = {
|
|||
name: "undo",
|
||||
action: undo,
|
||||
className: "fa fa-undo no-disable",
|
||||
title: ["Undo", "undo"]
|
||||
title: "Undo"
|
||||
},
|
||||
"redo": {
|
||||
name: "redo",
|
||||
action: redo,
|
||||
className: "fa fa-repeat no-disable",
|
||||
title: ["Redo", "redo"]
|
||||
title: "Redo"
|
||||
}
|
||||
};
|
||||
|
||||
|
@ -1096,16 +1121,9 @@ SimpleMDE.prototype.render = function(el) {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
keyMaps["Enter"] = "newlineAndIndentContinueMarkdownList";
|
||||
keyMaps["Tab"] = "tabAndIndentMarkdownList";
|
||||
keyMaps["Shift-Tab"] = "shiftTabAndUnindentMarkdownList";
|
||||
keyMaps["F11"] = function() {
|
||||
toggleFullScreen(self);
|
||||
};
|
||||
keyMaps["F9"] = function() {
|
||||
toggleSideBySide(self);
|
||||
};
|
||||
keyMaps["Esc"] = function(cm) {
|
||||
if(cm.getOption("fullScreen")) toggleFullScreen(self);
|
||||
};
|
||||
|
|
Loading…
Reference in a new issue