From 86e40bcf4aeec5f97d4f82b6afa1bf872b2a6e4d Mon Sep 17 00:00:00 2001 From: Jeroen Akkerman Date: Wed, 6 Oct 2021 01:33:19 +0200 Subject: [PATCH] Update README with some more modern JS --- README.md | 56 +++++++++++--------- example/index.html | 2 +- example/index_sideBySideFullscreenFalse.html | 2 +- 3 files changed, 32 insertions(+), 28 deletions(-) diff --git a/README.md b/README.md index fc2dea5..3cd4fe4 100644 --- a/README.md +++ b/README.md @@ -51,7 +51,7 @@ The editor is entirely customizable, from theming to toolbar buttons and javascr Via [npm](https://www.npmjs.com/package/easymde): ``` -npm install easymde --save +npm install easymde ``` Via the *UNPKG* CDN: @@ -61,6 +61,11 @@ Via the *UNPKG* CDN: ``` +Or *jsDelivr*: +```html + + +``` ## How to use @@ -71,7 +76,7 @@ After installing and/or importing the module, you can load EasyMDE onto the firs ```html ``` @@ -80,7 +85,7 @@ Alternatively you can select a specific TextArea, via Javascript: ```html ``` @@ -89,7 +94,7 @@ Or via jQuery: ```html ``` @@ -214,7 +219,7 @@ easyMDE.value('New input for **EasyMDE**'); Most options demonstrate the non-default behavior: ```JavaScript -var editor = new EasyMDE({ +const editor = new EasyMDE({ autofocus: true, autosave: { enabled: true, @@ -245,7 +250,7 @@ var editor = new EasyMDE({ insertTexts: { horizontalRule: ["", "\n\n-----\n\n"], image: ["![](http://", ")"], - link: ["[", "](http://)"], + link: ["[", "](https://)"], table: ["", "\n\n| Column 1 | Column 2 | Column 3 |\n| -------- | -------- | -------- |\n| Text | Text | Text |\n\n"], }, lineWrapping: false, @@ -260,11 +265,9 @@ var editor = new EasyMDE({ previewClass: "my-custom-styling", previewClass: ["my-custom-styling", "more-custom-styling"], - previewRender: function(plainText) { - return customMarkdownParser(plainText); // Returns HTML from a custom parser - }, - previewRender: function(plainText, preview) { // Async method - setTimeout(function(){ + previewRender: (plainText) => customMarkdownParser(plainText), // Returns HTML from a custom parser + previewRender: (plainText, preview) => { // Async method + setTimeout(() => { preview.innerHTML = customMarkdownParser(plainText); }, 250); @@ -278,7 +281,7 @@ var editor = new EasyMDE({ renderingConfig: { singleLineBreaks: false, codeSyntaxHighlighting: true, - sanitizerFunction: function(renderedHTML) { + sanitizerFunction: (renderedHTML) => { // Using DOMPurify and only allowing tags return DOMPurify.sanitize(renderedHTML, {ALLOWED_TAGS: ['b']}) }, @@ -292,13 +295,14 @@ var editor = new EasyMDE({ status: ["autosave", "lines", "words", "cursor"], // Optional usage status: ["autosave", "lines", "words", "cursor", { className: "keystrokes", - defaultValue: function(el) { - this.keystrokes = 0; - el.innerHTML = "0 Keystrokes"; - }, - onUpdate: function(el) { - el.innerHTML = ++this.keystrokes + " Keystrokes"; - }, + defaultValue: (el) => { + el.setAttribute('data-keystrokes', 0); + }, + onUpdate: (el) => { + 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 styleSelectedText: false, sideBySideFullscreen: false, @@ -349,7 +353,7 @@ Customize the toolbar using the `toolbar` option. Only the order of existing buttons: ```JavaScript -var easyMDE = new EasyMDE({ +const easyMDE = new EasyMDE({ toolbar: ["bold", "italic", "heading", "|", "quote"] }); ``` @@ -357,7 +361,7 @@ var easyMDE = new EasyMDE({ All information and/or add your own icons ```Javascript -var easyMDE = new EasyMDE({ +const easyMDE = new EasyMDE({ toolbar: [{ name: "bold", action: EasyMDE.toggleBold, @@ -381,7 +385,7 @@ var easyMDE = new EasyMDE({ Put some buttons on dropdown menu ```Javascript -var easyMDE = new EasyMDE({ +const easyMDE = new EasyMDE({ toolbar: [{ name: "heading", 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: ```JavaScript -var editor = new EasyMDE({ +const editor = new EasyMDE({ shortcuts: { "toggleOrderedList": "Ctrl-Alt-K", // alter the shortcut for toggleOrderedList "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 ```JavaScript -var easyMDE = new EasyMDE(); +const easyMDE = new EasyMDE(); easyMDE.codemirror.on("change", function(){ 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. ```JavaScript -var easyMDE = new EasyMDE(); +const easyMDE = new EasyMDE(); // ... easyMDE.toTextArea(); 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. ```js -var easyMDE = new EasyMDE(); +const easyMDE = new EasyMDE(); easyMDE.isPreviewActive(); // returns boolean easyMDE.isSideBySideActive(); // returns boolean easyMDE.isFullscreenActive(); // returns boolean diff --git a/example/index.html b/example/index.html index efccc4b..ce03794 100644 --- a/example/index.html +++ b/example/index.html @@ -13,7 +13,7 @@ diff --git a/example/index_sideBySideFullscreenFalse.html b/example/index_sideBySideFullscreenFalse.html index 8fe15db..a695b3d 100644 --- a/example/index_sideBySideFullscreenFalse.html +++ b/example/index_sideBySideFullscreenFalse.html @@ -13,7 +13,7 @@