Netsyms/easy-markdown-editor
2
0
Fork 0
mirror of https://github.com/Ionaru/easy-markdown-editor synced 2025-06-27 21:21:02 -06:00
Code Issues Releases Wiki Activity

Update README with some more modern JS

Browse Source
This commit is contained in:
Jeroen Akkerman 2021-10-06 01:33:19 +02:00
parent 35b42c404a
commit 86e40bcf4a
3 changed files with 32 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
README.md
View File

@ -51,7 +51,7 @@ The editor is entirely customizable, from theming to toolbar buttons and javascr
Via [npm](https://www.npmjs.com/package/easymde): Via [npm](https://www.npmjs.com/package/easymde):
``` ```
npm install easymde --save npm install easymde
``` ```
Via the *UNPKG* CDN: Via the *UNPKG* CDN:
@ -61,6 +61,11 @@ Via the *UNPKG* CDN:
<script src="https://unpkg.com/easymde/dist/easymde.min.js"></script> <script src="https://unpkg.com/easymde/dist/easymde.min.js"></script>
``` ```
Or *jsDelivr*:
```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css">
<script src="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.js"></script>
```
## How to use ## How to use
@ -71,7 +76,7 @@ After installing and/or importing the module, you can load EasyMDE onto the firs
```html ```html
<textarea></textarea> <textarea></textarea>
<script> <script>
var easyMDE = new EasyMDE(); const easyMDE = new EasyMDE();
</script> </script>
``` ```
@ -80,7 +85,7 @@ 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>
var easyMDE = new EasyMDE({element: document.getElementById('my-text-area')}); const easyMDE = new EasyMDE({element: document.getElementById('my-text-area')});
</script> </script>
``` ```
@ -89,7 +94,7 @@ Or via jQuery:
```html ```html
<textarea id="my-text-area"></textarea> <textarea id="my-text-area"></textarea>
<script> <script>
var easyMDE = new EasyMDE({element: $('#my-text-area')[0]}); const easyMDE = new EasyMDE({element: $('#my-text-area')[0]});
</script> </script>
``` ```
@ -214,7 +219,7 @@ easyMDE.value('New input for **EasyMDE**');
Most options demonstrate the non-default behavior: Most options demonstrate the non-default behavior:
```JavaScript ```JavaScript
var editor = new EasyMDE({ const editor = new EasyMDE({
autofocus: true, autofocus: true,
autosave: { autosave: {
enabled: true, enabled: true,
@ -245,7 +250,7 @@ var editor = new EasyMDE({
insertTexts: { insertTexts: {
horizontalRule: ["", "\n\n-----\n\n"], horizontalRule: ["", "\n\n-----\n\n"],
image: ["![](http://", ")"], image: ["![](http://", ")"],
link: ["[", "](http://)"], link: ["[", "](https://)"],
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,
@ -260,11 +265,9 @@ var editor = new EasyMDE({
previewClass: "my-custom-styling", previewClass: "my-custom-styling",
previewClass: ["my-custom-styling", "more-custom-styling"], previewClass: ["my-custom-styling", "more-custom-styling"],
previewRender: function(plainText) { previewRender: (plainText) => customMarkdownParser(plainText), // Returns HTML from a custom parser
return customMarkdownParser(plainText); // Returns HTML from a custom parser previewRender: (plainText, preview) => { // Async method
}, setTimeout(() => {
previewRender: function(plainText, preview) { // Async method
setTimeout(function(){
preview.innerHTML = customMarkdownParser(plainText); preview.innerHTML = customMarkdownParser(plainText);
}, 250); }, 250);
@ -278,7 +281,7 @@ var editor = new EasyMDE({
renderingConfig: { renderingConfig: {
singleLineBreaks: false, singleLineBreaks: false,
codeSyntaxHighlighting: true, codeSyntaxHighlighting: true,
sanitizerFunction: function(renderedHTML) { sanitizerFunction: (renderedHTML) => {
// Using DOMPurify and only allowing <b> tags // Using DOMPurify and only allowing <b> tags
return DOMPurify.sanitize(renderedHTML, {ALLOWED_TAGS: ['b']}) return DOMPurify.sanitize(renderedHTML, {ALLOWED_TAGS: ['b']})
}, },
@ -292,12 +295,13 @@ var editor = new EasyMDE({
status: ["autosave", "lines", "words", "cursor"], // Optional usage status: ["autosave", "lines", "words", "cursor"], // Optional usage
status: ["autosave", "lines", "words", "cursor", { status: ["autosave", "lines", "words", "cursor", {
className: "keystrokes", className: "keystrokes",
defaultValue: function(el) { defaultValue: (el) => {
this.keystrokes = 0; el.setAttribute('data-keystrokes', 0);
el.innerHTML = "0 Keystrokes";
}, },
onUpdate: function(el) { onUpdate: (el) => {
el.innerHTML = ++this.keystrokes + " Keystrokes"; let keystrokes = Number(el.getAttribute('data-keystrokes')) + 1;
el.innerHTML = keystrokes + " Keystrokes";
el.setAttribute('data-keystrokes', keystrokes);
}, },
}], // Another optional usage, with a custom status bar item that counts keystrokes }], // Another optional usage, with a custom status bar item that counts keystrokes
styleSelectedText: false, styleSelectedText: false,
@ -349,7 +353,7 @@ Customize the toolbar using the `toolbar` option.
Only the order of existing buttons: Only the order of existing buttons:
```JavaScript ```JavaScript
var easyMDE = new EasyMDE({ const easyMDE = new EasyMDE({
toolbar: ["bold", "italic", "heading", "|", "quote"] toolbar: ["bold", "italic", "heading", "|", "quote"]
}); });
``` ```
@ -357,7 +361,7 @@ var easyMDE = new EasyMDE({
All information and/or add your own icons All information and/or add your own icons
```Javascript ```Javascript
var easyMDE = new EasyMDE({ const easyMDE = new EasyMDE({
toolbar: [{ toolbar: [{
name: "bold", name: "bold",
action: EasyMDE.toggleBold, action: EasyMDE.toggleBold,
@ -381,7 +385,7 @@ var easyMDE = new EasyMDE({
Put some buttons on dropdown menu Put some buttons on dropdown menu
```Javascript ```Javascript
var easyMDE = new EasyMDE({ const easyMDE = new EasyMDE({
toolbar: [{ toolbar: [{
name: "heading", name: "heading",
action: EasyMDE.toggleHeadingSmaller, action: EasyMDE.toggleHeadingSmaller,
@ -443,7 +447,7 @@ Shortcut (Windows / Linux) | Shortcut (macOS) | Action
Here is how you can change a few, while leaving others untouched: Here is how you can change a few, while leaving others untouched:
```JavaScript ```JavaScript
var editor = new EasyMDE({ const editor = new EasyMDE({
shortcuts: { shortcuts: {
"toggleOrderedList": "Ctrl-Alt-K", // alter the shortcut for toggleOrderedList "toggleOrderedList": "Ctrl-Alt-K", // alter the shortcut for toggleOrderedList
"toggleCodeBlock": null, // unbind Ctrl-Alt-C "toggleCodeBlock": null, // unbind Ctrl-Alt-C
@ -464,7 +468,7 @@ The list of actions that can be bound is the same as the list of built-in action
You can catch the following list of events: https://codemirror.net/doc/manual.html#events You can catch the following list of events: https://codemirror.net/doc/manual.html#events
```JavaScript ```JavaScript
var easyMDE = new EasyMDE(); const easyMDE = new EasyMDE();
easyMDE.codemirror.on("change", function(){ easyMDE.codemirror.on("change", function(){
console.log(easyMDE.value()); console.log(easyMDE.value());
}); });
@ -476,7 +480,7 @@ easyMDE.codemirror.on("change", function(){
You can revert to the initial text area by calling the `toTextArea` method. Note that this clears up the autosave (if enabled) associated with it. The text area will retain any text from the destroyed EasyMDE instance. You can revert to the initial text area by calling the `toTextArea` method. Note that this clears up the autosave (if enabled) associated with it. The text area will retain any text from the destroyed EasyMDE instance.
```JavaScript ```JavaScript
var easyMDE = new EasyMDE(); const easyMDE = new EasyMDE();
// ... // ...
easyMDE.toTextArea(); easyMDE.toTextArea();
easyMDE = null; easyMDE = null;
@ -490,7 +494,7 @@ If you need to remove installed listeners (when editor not needed anymore), call
The following self-explanatory methods may be of use while developing with EasyMDE. The following self-explanatory methods may be of use while developing with EasyMDE.
```js ```js
var easyMDE = new EasyMDE(); const easyMDE = new EasyMDE();
easyMDE.isPreviewActive(); // returns boolean easyMDE.isPreviewActive(); // returns boolean
easyMDE.isSideBySideActive(); // returns boolean easyMDE.isSideBySideActive(); // returns boolean
easyMDE.isFullscreenActive(); // returns boolean easyMDE.isFullscreenActive(); // returns boolean

2
example/index.html
View File

@ -13,7 +13,7 @@
<body> <body>
<textarea></textarea> <textarea></textarea>
<script> <script>
var easyMDE = new EasyMDE(); const easyMDE = new EasyMDE();
</script> </script>
</body> </body>

2
example/index_sideBySideFullscreenFalse.html
View File

@ -13,7 +13,7 @@
<body> <body>
<textarea></textarea> <textarea></textarea>
<script> <script>
var easyMDE = new EasyMDE({sideBySideFullscreen: false}); const easyMDE = new EasyMDE({sideBySideFullscreen: false});
</script> </script>
</body> </body>