And then load SimpleMDE on the first textarea on a page
And then load SimpleMDE on the first textarea on a page
```HTML
```HTML
@ -65,28 +59,30 @@ simplemde.value("This text will appear in the editor");
## Configuration
## Configuration
- **autoDownloadFontAwesome**: If set to `true`, force downloads Font Awesome (used for icons). If set to false, prevents downloading. Defaults to `undefined`, which will intelligently check whether Font Awesome has already been included, then download accordingly.
- **autofocus**: If set to `true`, autofocuses the editor. Defaults to `false`.
- **autofocus**: If set to `true`, autofocuses the editor. Defaults to `false`.
- **autosave**: *Saves the text that's being written. It will forget the text when the form is submitted.*
- **autosave**: *Saves the text that's being written. It will forget the text when the form is submitted.*
- **enabled**: If set to `true`, autosave the text. Defaults to `false`.
- **enabled**: If set to `true`, autosave the text. Defaults to `false`.
- **delay**: Delay between saves, in milliseconds. Defaults to `10000` (10s).
- **delay**: Delay between saves, in milliseconds. Defaults to `10000` (10s).
- **unique_id**: You must set a unique identifier so that SimpleMDE can autosave. Something that separates this from other textareas.
- **unique_id**: You must set a unique identifier so that SimpleMDE can autosave. Something that separates this from other textareas.
- **element**: The DOM element for the textarea to use. Defaults to the first textarea on the page.
- **element**: The DOM element for the textarea to use. Defaults to the first textarea on the page.
- **hideIcons**: An array of icon names to hide. Can be used to hide specific icons without completely customizing the toolbar.
- **indentWithTabs**: If set to `false`, indent using spaces instead of tabs. Defaults to `true`.
- **indentWithTabs**: If set to `false`, indent using spaces instead of tabs. Defaults to `true`.
- **initialValue**: If set, will customize the initial value of the editor.
- **initialValue**: If set, will customize the initial value of the editor.
- **lineWrapping**: If set to `false`, disable line wrapping. Defaults to `true`.
- **lineWrapping**: If set to `false`, disable line wrapping. Defaults to `true`.
- **parsingConfig**: Adjust settings for parsing the Markdown during editing (not previewing).
- **parsingConfig**: Adjust settings for parsing the Markdown during editing (not previewing).
- **allowAtxHeaderWithoutSpace**: If set to `true`, will render headers without a space after the `#`. Defaults to `false`.
- **allowAtxHeaderWithoutSpace**: If set to `true`, will render headers without a space after the `#`. Defaults to `false`.
- **fencedCodeBlocks**: If set to `false`, will not process GFM fenced code blocks syntax. Defaults to `true`.
- **strikethrough**: If set to `false`, will not process GFM strikethrough syntax. Defaults to `true`.
- **strikethrough**: If set to `false`, will not process GFM strikethrough syntax. Defaults to `true`.
- **underscoresBreakWords**: If set to `true`, let underscores be a delimiter for separating words. Defaults to `false`.
- **underscoresBreakWords**: If set to `true`, let underscores be a delimiter for separating words. Defaults to `false`.
- **previewRender**: Custom function for parsing the plaintext Markdown and returning HTML. Used when user previews.
- **previewRender**: Custom function for parsing the plaintext Markdown and returning HTML. Used when user previews.
- **singleLineBreaks**: If set to `false`, disable parsing GFM single line breaks. Defaults to `true`.
- **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>`<scriptsrc="https://cdn.jsdelivr.net/highlight.js/latest/highlight.min.js"></script>`<br>`<linkrel="stylesheet"href="https://cdn.jsdelivr.net/highlight.js/latest/styles/github.min.css">`
- **spellChecker**: If set to `false`, disable the spell checker. Defaults to `true`.
- **spellChecker**: If set to `false`, disable the spell checker. Defaults to `true`.
- **status**: If set to `false`, hide the status bar. Defaults to `true`.
- **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.
- Optionally, you can set an array of status bar elements to include, and in what order.
- **tabSize**: If set, customize the tab size. Defaults to `2`.
- **tabSize**: If set, customize the tab size. Defaults to `2`.
- **toolbar**: If set to `false`, hide the toolbar. Defaults to the [array of icons](#toolbar-icons).
- **toolbar**: If set to `false`, hide the toolbar. Defaults to the [array of icons](#toolbar-icons).
- **toolbarGuideIcon**: If set to `false`, disable guide icon in the toolbar. Defaults to `true`.
- **toolbarTips**: If set to `false`, disable toolbar button tips. Defaults to `true`.
- **toolbarTips**: If set to `false`, disable toolbar button tips. Defaults to `true`.
```JavaScript
```JavaScript
@ -98,12 +94,12 @@ var simplemde = new SimpleMDE({
delay: 1000,
delay: 1000,
},
},
element: document.getElementById("MyID"),
element: document.getElementById("MyID"),
hideIcons: ["guide", "heading"],
indentWithTabs: false,
indentWithTabs: false,
initialValue: "Hello world!",
initialValue: "Hello world!",
lineWrapping: false,
lineWrapping: false,
parsingConfig: {
parsingConfig: {
allowAtxHeaderWithoutSpace: true,
allowAtxHeaderWithoutSpace: true,
fencedCodeBlocks: false,
strikethrough: false,
strikethrough: false,
underscoresBreakWords: true,
underscoresBreakWords: true,
},
},
@ -117,13 +113,15 @@ var simplemde = new SimpleMDE({
Wes Cossick
9 years ago