You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+75-19Lines changed: 75 additions & 19 deletions
Original file line number
Diff line number
Diff line change
@@ -90,14 +90,16 @@ simplemde.value("This text will appear in the editor");
90
90
-**allowAtxHeaderWithoutSpace**: If set to `true`, will render headers without a space after the `#`. Defaults to `false`.
91
91
-**strikethrough**: If set to `false`, will not process GFM strikethrough syntax. Defaults to `true`.
92
92
-**underscoresBreakWords**: If set to `true`, let underscores be a delimiter for separating words. Defaults to `false`.
93
+
-**placeholder**: Custom placeholder that should be displayed
93
94
-**previewRender**: Custom function for parsing the plaintext Markdown and returning HTML. Used when user previews.
94
95
-**renderingConfig**: Adjust settings for parsing the Markdown during previewing (not editing).
95
96
-**singleLineBreaks**: If set to `false`, disable parsing GFM single line breaks. Defaults to `true`.
96
97
-**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">`
98
+
-**shortcuts**: Keyboard shortcuts associated with this instance. Defaults to the [array of shortcuts](#keyboard-shortcuts).
97
99
-**showIcons**: An array of icon names to show. Can be used to show specific icons hidden by default without completely customizing the toolbar.
98
100
-**spellChecker**: If set to `false`, disable the spell checker. Defaults to `true`.
99
-
-**status**: If set to `false`, hide the status bar. Defaults to `true`.
100
-
- Optionally, you can set an array of status bar elements to include, and in what order.
101
+
-**status**: If set to `false`, hide the status bar. Defaults to the array of built-in status bar items.
102
+
- Optionally, you can set an array of status bar items to include, and in what order. You can even define your own custom status bar items.
101
103
-**tabSize**: If set, customize the tab size. Defaults to `2`.
102
104
-**toolbar**: If set to `false`, hide the toolbar. Defaults to the [array of icons](#toolbar-icons).
103
105
-**toolbarTips**: If set to `false`, disable toolbar button tips. Defaults to `true`.
@@ -131,24 +133,38 @@ var simplemde = new SimpleMDE({
131
133
strikethrough:false,
132
134
underscoresBreakWords:true,
133
135
},
136
+
placeholder:"Type here...",
134
137
previewRender:function(plainText) {
135
138
returncustomMarkdownParser(plainText); // Returns HTML from a custom parser
}], // Another optional usage, with a custom status bar item that counts keystrokes
152
168
tabSize:4,
153
169
toolbar:false,
154
170
toolbarTips:false,
@@ -157,30 +173,33 @@ var simplemde = new SimpleMDE({
157
173
158
174
#### Toolbar icons
159
175
160
-
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.
176
+
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 (i.e. with the value of `action` set to `bold` and that of `tooltip` set to `Bold`, the final text the user will see would be "Bold (Ctrl-B)").
177
+
178
+
Additionally, you can add a separator between any icons by adding `"|"` to the toolbar array.
Customize the toolbar using the `toolbar` option like:
@@ -197,7 +216,7 @@ var simplemde = new SimpleMDE({
197
216
name:"bold",
198
217
action:SimpleMDE.toggleBold,
199
218
className:"fa fa-bold",
200
-
title:"Bold (Ctrl+B)",
219
+
title:"Bold",
201
220
},
202
221
{
203
222
name:"custom",
@@ -213,6 +232,43 @@ var simplemde = new SimpleMDE({
213
232
});
214
233
```
215
234
235
+
#### Keyboard shortcuts
236
+
237
+
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:
238
+
239
+
Shortcut | Action
240
+
:------- | :-----
241
+
*Cmd-'* | "toggleBlockquote"
242
+
*Cmd-B* | "toggleBold"
243
+
*Cmd-E* | "cleanBlock"
244
+
*Cmd-H* | "toggleHeadingSmaller"
245
+
*Cmd-I* | "toggleItalic"
246
+
*Cmd-K* | "drawLink"
247
+
*Cmd-L* | "toggleUnorderedList"
248
+
*Cmd-P* | "togglePreview"
249
+
*Cmd-Alt-C* | "toggleCodeBlock"
250
+
*Cmd-Alt-I* | "drawImage"
251
+
*Cmd-Alt-L* | "toggleOrderedList"
252
+
*Shift-Cmd-H* | "toggleHeadingBigger"
253
+
*F9* | "toggleSideBySide"
254
+
*F11* | "toggleFullScreen"
255
+
256
+
Here is how you can change a few, while leaving others untouched:
257
+
258
+
```JavaScript
259
+
var simplemde =newSimpleMDE({
260
+
shortcuts: {
261
+
"toggleOrderedList":"Ctrl-Alt-K", // alter the shortcut for toggleOrderedList
262
+
"toggleCodeBlock":null, // unbind Ctrl-Alt-C
263
+
"drawTable":"Cmd-Alt-T"// bind Cmd-Alt-T to drawTable action, which doesn't come with a default shortcut
264
+
}
265
+
});
266
+
```
267
+
268
+
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-B" will become "Cmd-B" for Mac users.
269
+
270
+
The list of actions that can be bound is the same as the list of built-in actions available for [toolbar buttons](#toolbar-icons).
271
+
216
272
#### Height
217
273
218
274
To change the minimum height (before it starts auto-growing):
0 commit comments