mirror of
https://github.com/Ionaru/easy-markdown-editor
synced 2025-07-24 18:34:28 -06:00
Fix typos and other minor improvements.
This commit is contained in:
parent
e0e988d463
commit
2555bc0b24
60
README.md
60
README.md
@ -8,16 +8,15 @@
|
|||||||
[SimpleMDE, made by Sparksuite](https://github.com/sparksuite/simplemde-markdown-editor/).
|
[SimpleMDE, made by Sparksuite](https://github.com/sparksuite/simplemde-markdown-editor/).
|
||||||
Go to the [dedicated section](#simplemde-fork) for more information.
|
Go to the [dedicated section](#simplemde-fork) for more information.
|
||||||
|
|
||||||
This repository is a fork of [SimpleMDE, made by Sparksuite](https://github.com/sparksuite/simplemde-markdown-editor/).
|
|
||||||
|
|
||||||
A drop-in JavaScript text area replacement for writing beautiful and understandable Markdown.
|
A drop-in JavaScript text area replacement for writing beautiful and understandable Markdown.
|
||||||
EasyMDE allows users who may be less experienced with Markdown to use familiar toolbar buttons and shortcuts.
|
EasyMDE allows users who may be less experienced with Markdown to use familiar toolbar buttons and shortcuts.
|
||||||
|
|
||||||
In addition, the syntax is rendered while editing to clearly show the expected result. Headings are larger, emphasized words are italicized, links are underlined, etc.
|
In addition, the syntax is rendered while editing to clearly show the expected result. Headings are larger, emphasized words are italicized, links are underlined, etc.
|
||||||
|
|
||||||
EasyMDE also features both built-in auto saving and spell checking.
|
EasyMDE also features both built-in auto saving and spell checking.
|
||||||
The editor is entirely customizable, from theming to toolbar buttons and javascript hooks.
|
The editor is entirely customizable, from theming to toolbar buttons and javascript hooks.
|
||||||
|
|
||||||
[**Demo**](https://easymde.tk/)
|
[**Try the demo**](https://easymde.tk/)
|
||||||
|
|
||||||
[](https://easymde.tk/)
|
[](https://easymde.tk/)
|
||||||
|
|
||||||
@ -36,7 +35,7 @@ The editor is entirely customizable, from theming to toolbar buttons and javascr
|
|||||||
- [Keyboard shortcuts](#keyboard-shortcuts)
|
- [Keyboard shortcuts](#keyboard-shortcuts)
|
||||||
- [Advanced use](#advanced-use)
|
- [Advanced use](#advanced-use)
|
||||||
- [Event handling](#event-handling)
|
- [Event handling](#event-handling)
|
||||||
- [Removing EasyMDE from textarea](#removing-easymde-from-textarea)
|
- [Removing EasyMDE from text area](#removing-easymde-from-text-area)
|
||||||
- [Useful methods](#useful-methods)
|
- [Useful methods](#useful-methods)
|
||||||
- [How it works](#how-it-works)
|
- [How it works](#how-it-works)
|
||||||
- [SimpleMDE fork](#simplemde-fork)
|
- [SimpleMDE fork](#simplemde-fork)
|
||||||
@ -45,12 +44,14 @@ The editor is entirely customizable, from theming to toolbar buttons and javascr
|
|||||||
|
|
||||||
## Install EasyMDE
|
## Install EasyMDE
|
||||||
|
|
||||||
Via [npm](https://www.npmjs.com/package/easymde).
|
Via [npm](https://www.npmjs.com/package/easymde):
|
||||||
|
|
||||||
```
|
```
|
||||||
npm install easymde --save
|
npm install easymde --save
|
||||||
```
|
```
|
||||||
|
|
||||||
Via the UNPKG CDN.
|
Via the *UNPKG* CDN:
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<link rel="stylesheet" href="https://unpkg.com/easymde/dist/easymde.min.css">
|
<link rel="stylesheet" href="https://unpkg.com/easymde/dist/easymde.min.css">
|
||||||
<script src="https://unpkg.com/easymde/dist/easymde.min.js"></script>
|
<script src="https://unpkg.com/easymde/dist/easymde.min.js"></script>
|
||||||
@ -61,7 +62,8 @@ Via the UNPKG CDN.
|
|||||||
|
|
||||||
### Loading the editor
|
### Loading the editor
|
||||||
|
|
||||||
After installing and/or importing the module, you can load EasyMDE onto the first TextArea on the webpage.
|
After installing and/or importing the module, you can load EasyMDE onto the first TextArea on the web page:
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<textarea></textarea>
|
<textarea></textarea>
|
||||||
<script>
|
<script>
|
||||||
@ -69,7 +71,8 @@ var easyMDE = new EasyMDE();
|
|||||||
</script>
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
Alternatively you can select a specific TextArea, via Javascript.
|
Alternatively you can select a specific TextArea, via Javascript:
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<textarea id="my-text-area"></textarea>
|
<textarea id="my-text-area"></textarea>
|
||||||
<script>
|
<script>
|
||||||
@ -77,7 +80,8 @@ var easyMDE = new EasyMDE({element: document.getElementById('my-text-area')});
|
|||||||
</script>
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
Or via jQuery.
|
Or via jQuery:
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<textarea id="my-text-area"></textarea>
|
<textarea id="my-text-area"></textarea>
|
||||||
<script>
|
<script>
|
||||||
@ -88,14 +92,16 @@ var easyMDE = new EasyMDE({element: $('#my-text-area')[0]});
|
|||||||
|
|
||||||
### Editor functions
|
### Editor functions
|
||||||
|
|
||||||
Use EasyMDE.value() to get the content of the editor.
|
Use EasyMDE.value() to get the content of the editor:
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<script>
|
<script>
|
||||||
easyMDE.value();
|
easyMDE.value();
|
||||||
</script>
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
Use EasyMDE.value(val) to set the content of the editor.
|
Use EasyMDE.value(val) to set the content of the editor:
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<script>
|
<script>
|
||||||
easyMDE.value('New input for **EasyMDE**');
|
easyMDE.value('New input for **EasyMDE**');
|
||||||
@ -108,9 +114,9 @@ easyMDE.value('New input for **EasyMDE**');
|
|||||||
### Options list
|
### Options list
|
||||||
|
|
||||||
- **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.
|
- **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`, focuses the editor automatically. Defaults to `false`.
|
||||||
- **autosave**: *Saves the text that's being written and will load it back in the future. It will forget the text when the form it's contained in is submitted.*
|
- **autosave**: *Saves the text that's being written and will load it back in the future. It will forget the text when the form it's contained in is submitted.*
|
||||||
- **enabled**: If set to `true`, autosave the text. Defaults to `false`.
|
- **enabled**: If set to `true`, saves the text automatically. Defaults to `false`.
|
||||||
- **delay**: Delay between saves, in milliseconds. Defaults to `10000` (10s).
|
- **delay**: Delay between saves, in milliseconds. Defaults to `10000` (10s).
|
||||||
- **uniqueId**: You must set a unique string identifier so that EasyMDE can autosave. Something that separates this from other instances of EasyMDE elsewhere on your website.
|
- **uniqueId**: You must set a unique string identifier so that EasyMDE can autosave. Something that separates this from other instances of EasyMDE elsewhere on your website.
|
||||||
- **blockStyles**: Customize how certain buttons that style blocks of text behave.
|
- **blockStyles**: Customize how certain buttons that style blocks of text behave.
|
||||||
@ -128,7 +134,7 @@ easyMDE.value('New input for **EasyMDE**');
|
|||||||
- link
|
- link
|
||||||
- table
|
- table
|
||||||
- **lineWrapping**: If set to `false`, disable line wrapping. Defaults to `true`.
|
- **lineWrapping**: If set to `false`, disable line wrapping. Defaults to `true`.
|
||||||
- **minHeight**: Sets the minimum height for the composition area, before it starts auto-growing. Should be a string containing a valid CSS value like `"500px"`. Dafaults to `"300px"`.
|
- **minHeight**: Sets the minimum height for the composition area, before it starts auto-growing. Should be a string containing a valid CSS value like `"500px"`. Defaults to `"300px"`.
|
||||||
- **onToggleFullScreen**: A function that gets called when the editor's full screen mode is toggled. The function will be passed a boolean as parameter, `true` when the editor is currently going into full screen mode, or `false`.
|
- **onToggleFullScreen**: A function that gets called when the editor's full screen mode is toggled. The function will be passed a boolean as parameter, `true` when the editor is currently going into full screen mode, or `false`.
|
||||||
- **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`.
|
||||||
@ -168,7 +174,7 @@ var editor = new EasyMDE({
|
|||||||
autosave: {
|
autosave: {
|
||||||
enabled: true,
|
enabled: true,
|
||||||
uniqueId: "MyUniqueID",
|
uniqueId: "MyUniqueID",
|
||||||
delay: 1000,
|
delay: 1000
|
||||||
},
|
},
|
||||||
blockStyles: {
|
blockStyles: {
|
||||||
bold: "__",
|
bold: "__",
|
||||||
@ -183,14 +189,14 @@ var editor = new EasyMDE({
|
|||||||
horizontalRule: ["", "\n\n-----\n\n"],
|
horizontalRule: ["", "\n\n-----\n\n"],
|
||||||
image: [""],
|
image: [""],
|
||||||
link: ["[", "](http://)"],
|
link: ["[", "](http://)"],
|
||||||
table: ["", "\n\n| Column 1 | Column 2 | Column 3 |\n| -------- | -------- | -------- |\n| Text | Text | Text |\n\n"],
|
table: ["", "\n\n| Column 1 | Column 2 | Column 3 |\n| -------- | -------- | -------- |\n| Text | Text | Text |\n\n"]
|
||||||
},
|
},
|
||||||
lineWrapping: false,
|
lineWrapping: false,
|
||||||
minHeight: "500px",
|
minHeight: "500px",
|
||||||
parsingConfig: {
|
parsingConfig: {
|
||||||
allowAtxHeaderWithoutSpace: true,
|
allowAtxHeaderWithoutSpace: true,
|
||||||
strikethrough: false,
|
strikethrough: false,
|
||||||
underscoresBreakWords: true,
|
underscoresBreakWords: true
|
||||||
},
|
},
|
||||||
placeholder: "Type here...",
|
placeholder: "Type here...",
|
||||||
previewRender: function(plainText) {
|
previewRender: function(plainText) {
|
||||||
@ -206,11 +212,11 @@ var editor = new EasyMDE({
|
|||||||
promptURLs: true,
|
promptURLs: true,
|
||||||
promptTexts: {
|
promptTexts: {
|
||||||
image: "Custom prompt for URL:",
|
image: "Custom prompt for URL:",
|
||||||
link: "Custom prompt for URL:",
|
link: "Custom prompt for URL:"
|
||||||
},
|
},
|
||||||
renderingConfig: {
|
renderingConfig: {
|
||||||
singleLineBreaks: false,
|
singleLineBreaks: false,
|
||||||
codeSyntaxHighlighting: true,
|
codeSyntaxHighlighting: true
|
||||||
},
|
},
|
||||||
shortcuts: {
|
shortcuts: {
|
||||||
drawTable: "Cmd-Alt-T"
|
drawTable: "Cmd-Alt-T"
|
||||||
@ -233,7 +239,7 @@ var editor = new EasyMDE({
|
|||||||
syncSideBySidePreviewScroll: false,
|
syncSideBySidePreviewScroll: false,
|
||||||
tabSize: 4,
|
tabSize: 4,
|
||||||
toolbar: false,
|
toolbar: false,
|
||||||
toolbarTips: false,
|
toolbarTips: false
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -278,7 +284,7 @@ Only the order of existing buttons:
|
|||||||
|
|
||||||
```JavaScript
|
```JavaScript
|
||||||
var easyMDE = new EasyMDE({
|
var easyMDE = new EasyMDE({
|
||||||
toolbar: ["bold", "italic", "heading", "|", "quote"],
|
toolbar: ["bold", "italic", "heading", "|", "quote"]
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -290,7 +296,7 @@ var easyMDE = new EasyMDE({
|
|||||||
name: "bold",
|
name: "bold",
|
||||||
action: EasyMDE.toggleBold,
|
action: EasyMDE.toggleBold,
|
||||||
className: "fa fa-bold",
|
className: "fa fa-bold",
|
||||||
title: "Bold",
|
title: "Bold"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "custom",
|
name: "custom",
|
||||||
@ -298,11 +304,11 @@ var easyMDE = new EasyMDE({
|
|||||||
// Add your own code
|
// Add your own code
|
||||||
},
|
},
|
||||||
className: "fa fa-star",
|
className: "fa fa-star",
|
||||||
title: "Custom Button",
|
title: "Custom Button"
|
||||||
},
|
},
|
||||||
"|", // Separator
|
"|" // Separator
|
||||||
...
|
// [, ...]
|
||||||
],
|
]
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -365,7 +371,7 @@ You can revert to the initial textarea by calling the `toTextArea` method. Note
|
|||||||
|
|
||||||
```JavaScript
|
```JavaScript
|
||||||
var easyMDE = new EasyMDE();
|
var easyMDE = new EasyMDE();
|
||||||
...
|
// ...
|
||||||
easyMDE.toTextArea();
|
easyMDE.toTextArea();
|
||||||
easyMDE = null;
|
easyMDE = null;
|
||||||
```
|
```
|
||||||
|
Loading…
x
Reference in New Issue
Block a user