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
+74-51Lines changed: 74 additions & 51 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,7 +9,7 @@ A drop-in JavaScript textarea replacement for writing beautiful and understandab
9
9
WYSIWYG editors that produce HTML are often complex and buggy. Markdown solves this problem in many ways, plus Markdown can be rendered natively on more platforms than HTML. However, Markdown is not a syntax that an average user will be familiar with, nor is it visually clear while editing. In otherwords, for an unfamiliar user, the syntax they write will make little sense until they click the preview button. SimpleMDE has been designed to bridge this gap for non-technical users who are less familiar with or just learning Markdown syntax.
10
10
11
11
## Quick start
12
-
SimpleMDE is available on npm.
12
+
SimpleMDE is available on [npm](https://www.npmjs.com/package/simplemde).
13
13
```
14
14
npm install simplemde --save
15
15
```
@@ -32,7 +32,6 @@ And then load SimpleMDE on the first textarea on a page
32
32
```HTML
33
33
<script>
34
34
var simplemde =newSimpleMDE();
35
-
simplemde.render();
36
35
</script>
37
36
```
38
37
@@ -43,7 +42,6 @@ Pure JavaScript method
43
42
```HTML
44
43
<script>
45
44
var simplemde =newSimpleMDE({ element:document.getElementById("MyID") });
46
-
simplemde.render();
47
45
</script>
48
46
```
49
47
@@ -52,85 +50,110 @@ jQuery method
52
50
```HTML
53
51
<script>
54
52
var simplemde =newSimpleMDE({ element:$("#MyID")[0] });
55
-
simplemde.render();
56
53
</script>
57
54
```
58
55
59
-
## Get the content
56
+
## Get/set the content
60
57
61
58
```JavaScript
62
59
simplemde.value();
63
60
```
64
61
62
+
```JavaScript
63
+
simplemde.value("This text will appear in the editor");
64
+
```
65
+
65
66
## Configuration
66
67
68
+
-**autofocus**: If set to `true`, autofocuses the editor. Defaults to `false`.
69
+
-**autosave**: *Saves the text that's being written. It will forget the text when the form is submitted.*
70
+
-**enabled**: If set to `true`, autosave the text. Defaults to `false`.
71
+
-**delay**: Delay between saves, in milliseconds. Defaults to `10000` (10s).
72
+
-**unique_id**: You must set a unique identifier so that SimpleMDE can autosave. Something that separates this from other textareas.
67
73
-**element**: The DOM element for the textarea to use. Defaults to the first textarea on the page.
74
+
-**indentWithTabs**: If set to `false`, indent using spaces instead of tabs. Defaults to `true`.
75
+
-**initialValue**: If set, will customize the initial value of the editor.
76
+
-**lineWrapping**: If set to `false`, disable line wrapping. Defaults to `true`.
77
+
-**parsingConfig**: Adjust settings for parsing the Markdown during editing (not previewing).
78
+
-**allowAtxHeaderWithoutSpace**: If set to `true`, will render headers without a space after the `#`. Defaults to `false`.
79
+
-**fencedCodeBlocks**: If set to `false`, will not process GFM fenced code blocks syntax. Defaults to `true`.
80
+
-**strikethrough**: If set to `false`, will not process GFM strikethrough syntax. Defaults to `true`.
81
+
-**underscoresBreakWords**: If set to `true`, let underscores be a delimiter for separating words. Defaults to `false`.
82
+
-**previewRender**: Custom function for parsing the plaintext Markdown and returning HTML. Used when user previews.
83
+
-**singleLineBreaks**: If set to `false`, disable parsing GFM single line breaks. Defaults to `true`.
84
+
-**spellChecker**: If set to `false`, disable the spell checker. Defaults to `true`.
68
85
-**status**: If set to `false`, hide the status bar. Defaults to `true`.
69
86
- Optionally, you can set an array of status bar elements to include, and in what order.
87
+
-**tabSize**: If set, customize the tab size. Defaults to `2`.
70
88
-**toolbar**: If set to `false`, hide the toolbar. Defaults to the [array of icons](#toolbar-icons).
71
-
-**toolbarTips**: If set to `false`, disable toolbar button tips. Defaults to `true`.
72
89
-**toolbarGuideIcon**: If set to `false`, disable guide icon in the toolbar. Defaults to `true`.
73
-
-**autofocus**: If set to `true`, autofocuses the editor. Defaults to `false`.
74
-
-**lineWrapping**: If set to `false`, disable line wrapping. Defaults to `true`.
75
-
-**indentWithTabs**: If set to `false`, indent using spaces instead of tabs. Defaults to `true`.
76
-
-**tabSize**: If set, customize the tab size. Defaults to `2`.
77
-
-**initialValue**: If set, will customize the initial value of the editor.
78
-
-**spellChecker**: If set to `false`, disable the spell checker. Defaults to `true`.
79
-
-**singleLineBreaks**: If set to `false`, disable parsing GFM single line breaks. Defaults to `true`.
80
-
-**autosave**: *Saves the text that's being written. It will forget the text when the form is submitted.*
81
-
-**enabled**: If set to `true`, autosave the text. Defaults to `false`.
82
-
-**unique_id**: You must set a unique identifier so that SimpleMDE can autosave. Something that separates this from other textareas.
83
-
-**delay**: Delay between saves, in milliseconds. Defaults to `10000` (10s).
90
+
-**toolbarTips**: If set to `false`, disable toolbar button tips. Defaults to `true`.
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. 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.
111
134
112
-
Name | Action | Class | Tooltip
113
-
:--- | :----- | :---- | :------
114
-
bold | toggleBold | fa fa-bold | Bold (Ctrl+B)
115
-
italic | toggleItalic | fa fa-italic | Italic (Ctrl+I)
116
-
strikethrough | toggleStrikethrough | fa fa-strikethrough | Strikethrough
117
-
heading | toggleHeadingSmaller | fa fa-header | Heading (Ctrl+H)
118
-
heading-smaller | toggleHeadingSmaller | fa fa-header | Smaller Heading (Ctrl+H)
0 commit comments