From 05cd00d36e7891566bad8765529601f4ce25db15 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nathana=C3=ABl=20Jourdane?= Date: Mon, 11 Feb 2019 14:12:36 +0100 Subject: [PATCH 01/15] Move fork explanation to the end of readme (better readability). --- README.md | 36 ++++++++++++++++++++++-------------- 1 file changed, 22 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index 15b1f14..60d9985 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,15 @@ # EasyMDE - Markdown Editor + +> This repository is a fork of +[SimpleMDE, made by Sparksuite](https://github.com/sparksuite/simplemde-markdown-editor/). +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 textarea replacement for writing beautiful and understandable Markdown. 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. + EasyMDE also features both built-in autosaving and spell checking. The editor is entirely customizable, from theming to toolbar buttons and javascript hooks. @@ -11,20 +17,6 @@ The editor is entirely customizable, from theming to toolbar buttons and javascr [![Preview](https://user-images.githubusercontent.com/3472373/51319377-26fe6e00-1a5d-11e9-8cc6-3137a566796d.png)](https://easymde.tk/) -I originally made this fork to implement FontAwesome 5 compatibility into SimpleMDE. When that was done I submitted a [pull request](https://github.com/sparksuite/simplemde-markdown-editor/pull/666), which has not been accepted yet. This, and the project being inactive since May 2017, triggered me to make more changes and try to put new life into the project. - -Changes include: -* FontAwesome 5 compatibility -* Guide button works when editor is in preview mode -* Links are now `https://` by default -* Small styling changes -* Support for Node 8 and beyond -* Lots of refactored code -* Links in preview will open in a new tab by default -* Typescript support - -My intention is to continue development on this project, improving it and keeping it alive. - [![npm version](https://img.shields.io/npm/v/easymde.svg?style=for-the-badge)](https://www.npmjs.com/package/easymde) [![npm version](https://img.shields.io/npm/v/easymde/next.svg?style=for-the-badge)](https://www.npmjs.com/package/easymde/v/next) [![Build Status](https://img.shields.io/travis/Ionaru/easy-markdown-editor/development.svg?style=for-the-badge)](https://travis-ci.org/Ionaru/easy-markdown-editor) @@ -348,3 +340,19 @@ EasyMDE is a continuation of SimpleMDE. SimpleMDE began as an improvement of [lepture's Editor project](https://github.com/lepture/editor), but has now taken on an identity of its own. It is bundled with [CodeMirror](https://github.com/codemirror/codemirror) and depends on [Font Awesome](http://fontawesome.io). CodeMirror is the backbone of the project and parses much of the Markdown syntax as it's being written. This allows us to add styles to the Markdown that's being written. Additionally, a toolbar and status bar have been added to the top and bottom, respectively. Previews are rendered by [Marked](https://github.com/chjj/marked) using GFM. + +## SimpleMDE fork + +I originally made this fork to implement FontAwesome 5 compatibility into SimpleMDE. When that was done I submitted a [pull request](https://github.com/sparksuite/simplemde-markdown-editor/pull/666), which has not been accepted yet. This, and the project being inactive since May 2017, triggered me to make more changes and try to put new life into the project. + +Changes include: +* FontAwesome 5 compatibility +* Guide button works when editor is in preview mode +* Links are now `https://` by default +* Small styling changes +* Support for Node 8 and beyond +* Lots of refactored code +* Links in preview will open in a new tab by default +* Typescript support + +My intention is to continue development on this project, improving it and keeping it alive. From ab4ac71f5a4f1c5da8680a8d4f5110811486bab3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nathana=C3=ABl=20Jourdane?= Date: Mon, 11 Feb 2019 14:13:12 +0100 Subject: [PATCH 02/15] Add license section --- README.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/README.md b/README.md index 60d9985..8e66b51 100644 --- a/README.md +++ b/README.md @@ -356,3 +356,10 @@ Changes include: * Typescript support My intention is to continue development on this project, improving it and keeping it alive. + +## License + +This project is released under the [MIT License](./LICENSE). + +- Copyright (c) 2015 Sparksuite, Inc. +- Copyright (c) 2017 Jeroen Akkerman. From bb1279ed2f083879b5b2a9afa2dec0ce910a8768 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nathana=C3=ABl=20Jourdane?= Date: Mon, 11 Feb 2019 14:15:18 +0100 Subject: [PATCH 03/15] move badges to the top (quick access) --- README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 8e66b51..32f404b 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,9 @@ # EasyMDE - Markdown Editor +[![npm version](https://img.shields.io/npm/v/easymde.svg?style=for-the-badge)](https://www.npmjs.com/package/easymde) +[![npm version](https://img.shields.io/npm/v/easymde/next.svg?style=for-the-badge)](https://www.npmjs.com/package/easymde/v/next) +[![Build Status](https://img.shields.io/travis/Ionaru/easy-markdown-editor/development.svg?style=for-the-badge)](https://travis-ci.org/Ionaru/easy-markdown-editor) + > This repository is a fork of [SimpleMDE, made by Sparksuite](https://github.com/sparksuite/simplemde-markdown-editor/). Go to the [dedicated section](#simplemde-fork) for more information. @@ -17,10 +21,6 @@ The editor is entirely customizable, from theming to toolbar buttons and javascr [![Preview](https://user-images.githubusercontent.com/3472373/51319377-26fe6e00-1a5d-11e9-8cc6-3137a566796d.png)](https://easymde.tk/) -[![npm version](https://img.shields.io/npm/v/easymde.svg?style=for-the-badge)](https://www.npmjs.com/package/easymde) -[![npm version](https://img.shields.io/npm/v/easymde/next.svg?style=for-the-badge)](https://www.npmjs.com/package/easymde/v/next) -[![Build Status](https://img.shields.io/travis/Ionaru/easy-markdown-editor/development.svg?style=for-the-badge)](https://travis-ci.org/Ionaru/easy-markdown-editor) - ## Install EasyMDE Via [npm](https://www.npmjs.com/package/easymde). ``` From a4a89775dcaafd1ae08b1103758d15e9a4c28072 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nathana=C3=ABl=20Jourdane?= Date: Mon, 11 Feb 2019 14:23:42 +0100 Subject: [PATCH 04/15] Improve titles structure --- README.md | 54 +++++++++++++++++++++++++++++++++++++++++++----------- 1 file changed, 43 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 32f404b..7be0b4b 100644 --- a/README.md +++ b/README.md @@ -21,7 +21,9 @@ The editor is entirely customizable, from theming to toolbar buttons and javascr [![Preview](https://user-images.githubusercontent.com/3472373/51319377-26fe6e00-1a5d-11e9-8cc6-3137a566796d.png)](https://easymde.tk/) + ## Install EasyMDE + Via [npm](https://www.npmjs.com/package/easymde). ``` npm install easymde --save @@ -33,9 +35,10 @@ Via the UNPKG CDN. ``` + ## How to use -#### Loading the editor +### Loading the editor After installing and/or importing the module, you can load EasyMDE onto the first TextArea on the webpage. ```html @@ -61,7 +64,8 @@ var easyMDE = new EasyMDE({element: $('#my-text-area')[0]}); ``` -#### Editor functions + +### Editor functions Use EasyMDE.value() to get the content of the editor. ```html @@ -77,8 +81,11 @@ easyMDE.value('New input for **EasyMDE**'); ``` + ## Configuration +### 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. - **autofocus**: If set to `true`, autofocuses the editor. 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.* @@ -129,8 +136,12 @@ easyMDE.value('New input for **EasyMDE**'); - **toolbar**: If set to `false`, hide the toolbar. Defaults to the [array of icons](#toolbar-icons). - **toolbarTips**: If set to `false`, disable toolbar button tips. Defaults to `true`. + +### Options example + +Most options demonstrate the non-default behavior: + ```JavaScript -// Most options demonstrate the non-default behavior var editor = new EasyMDE({ autofocus: true, autosave: { @@ -205,7 +216,8 @@ var editor = new EasyMDE({ }); ``` -#### Toolbar icons + +### Toolbar icons 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. Note that shortcut hints are added automatically and reflect the specified action if it has a keybind assigned to it (i.e. with the value of `action` set to `bold` and that of `tooltip` set to `Bold`, the final text the user will see would be "Bold (Ctrl-B)"). @@ -236,15 +248,22 @@ side-by-side | toggleSideBySide | Toggle Side by Side
fa fa-columns no-disabl fullscreen | toggleFullScreen | Toggle Fullscreen
fa fa-arrows-alt no-disable no-mobile guide | [This link](https://simplemde.com/markdown-guide) | Markdown Guide
fa fa-question-circle -Customize the toolbar using the `toolbar` option like: + +### Toolbar customization + +Customize the toolbar using the `toolbar` option. + +Only the order of existing buttons: ```JavaScript -// Customize only the order of existing buttons var easyMDE = new EasyMDE({ toolbar: ["bold", "italic", "heading", "|", "quote"], }); +``` -// Customize all information and/or add your own icons +All information and/or add your own icons + +```Javascript var easyMDE = new EasyMDE({ toolbar: [{ name: "bold", @@ -266,7 +285,8 @@ var easyMDE = new EasyMDE({ }); ``` -#### Keyboard shortcuts + +### Keyboard shortcuts EasyMDE comes with an array of predefined keyboard shortcuts, but they can be altered with a configuration option. The list of default ones is as follows: @@ -303,7 +323,11 @@ Shortcuts are automatically converted between platforms. If you define a shortcu The list of actions that can be bound is the same as the list of built-in actions available for [toolbar buttons](#toolbar-icons). -## Event handling + +## Advanced use + +### Event handling + You can catch the following list of events: https://codemirror.net/doc/manual.html#events ```JavaScript @@ -313,7 +337,9 @@ easyMDE.codemirror.on("change", function(){ }); ``` -## Removing EasyMDE from textarea + +### Removing EasyMDE from textarea + You can revert to the initial textarea by calling the `toTextArea` method. Note that this clears up the autosave (if enabled) associated with it. The textarea will retain any text from the destroyed EasyMDE instance. ```JavaScript @@ -323,7 +349,9 @@ easyMDE.toTextArea(); easyMDE = null; ``` -## Useful methods + +### Useful methods + The following self-explanatory methods may be of use while developing with EasyMDE. ```js @@ -334,13 +362,16 @@ easyMDE.isFullscreenActive(); // returns boolean easyMDE.clearAutosavedValue(); // no returned value ``` + ## How it works + EasyMDE is a continuation of SimpleMDE. SimpleMDE began as an improvement of [lepture's Editor project](https://github.com/lepture/editor), but has now taken on an identity of its own. It is bundled with [CodeMirror](https://github.com/codemirror/codemirror) and depends on [Font Awesome](http://fontawesome.io). CodeMirror is the backbone of the project and parses much of the Markdown syntax as it's being written. This allows us to add styles to the Markdown that's being written. Additionally, a toolbar and status bar have been added to the top and bottom, respectively. Previews are rendered by [Marked](https://github.com/chjj/marked) using GFM. + ## SimpleMDE fork I originally made this fork to implement FontAwesome 5 compatibility into SimpleMDE. When that was done I submitted a [pull request](https://github.com/sparksuite/simplemde-markdown-editor/pull/666), which has not been accepted yet. This, and the project being inactive since May 2017, triggered me to make more changes and try to put new life into the project. @@ -357,6 +388,7 @@ Changes include: My intention is to continue development on this project, improving it and keeping it alive. + ## License This project is released under the [MIT License](./LICENSE). From e0e988d463f671a7192d07887f1f4042c6900e36 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nathana=C3=ABl=20Jourdane?= Date: Mon, 11 Feb 2019 14:28:33 +0100 Subject: [PATCH 05/15] Add summary --- README.md | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/README.md b/README.md index 7be0b4b..90eb0b3 100644 --- a/README.md +++ b/README.md @@ -22,6 +22,27 @@ The editor is entirely customizable, from theming to toolbar buttons and javascr [![Preview](https://user-images.githubusercontent.com/3472373/51319377-26fe6e00-1a5d-11e9-8cc6-3137a566796d.png)](https://easymde.tk/) +## Quick access + +- [Install EasyMDE](#install-easymde) +- [How to use](#how-to-use) + - [Loading the editor](#loading-the-editor) + - [Editor functions](#editor-functions) +- [Configuration](#configuration) + - [Options list](#options-list) + - [Options example](#options-example) + - [Toolbar icons](#toolbar-icons) + - [Toolbar customization](#toolbar-customization) + - [Keyboard shortcuts](#keyboard-shortcuts) +- [Advanced use](#advanced-use) + - [Event handling](#event-handling) + - [Removing EasyMDE from textarea](#removing-easymde-from-textarea) + - [Useful methods](#useful-methods) +- [How it works](#how-it-works) +- [SimpleMDE fork](#simplemde-fork) +- [License](#license) + + ## Install EasyMDE Via [npm](https://www.npmjs.com/package/easymde). From 2555bc0b24a3c2b79521f03e7bcd03d3acd288b2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nathana=C3=ABl=20Jourdane?= Date: Mon, 11 Feb 2019 14:46:16 +0100 Subject: [PATCH 06/15] Fix typos and other minor improvements. --- README.md | 76 ++++++++++++++++++++++++++++++------------------------- 1 file changed, 41 insertions(+), 35 deletions(-) diff --git a/README.md b/README.md index 90eb0b3..d3ff57d 100644 --- a/README.md +++ b/README.md @@ -8,16 +8,15 @@ [SimpleMDE, made by Sparksuite](https://github.com/sparksuite/simplemde-markdown-editor/). 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 textarea 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. + 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 autosaving 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. -[**Demo**](https://easymde.tk/) +[**Try the demo**](https://easymde.tk/) [![Preview](https://user-images.githubusercontent.com/3472373/51319377-26fe6e00-1a5d-11e9-8cc6-3137a566796d.png)](https://easymde.tk/) @@ -36,7 +35,7 @@ The editor is entirely customizable, from theming to toolbar buttons and javascr - [Keyboard shortcuts](#keyboard-shortcuts) - [Advanced use](#advanced-use) - [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) - [How it works](#how-it-works) - [SimpleMDE fork](#simplemde-fork) @@ -45,12 +44,14 @@ The editor is entirely customizable, from theming to toolbar buttons and javascr ## Install EasyMDE -Via [npm](https://www.npmjs.com/package/easymde). +Via [npm](https://www.npmjs.com/package/easymde): + ``` npm install easymde --save ``` -Via the UNPKG CDN. +Via the *UNPKG* CDN: + ```html @@ -61,7 +62,8 @@ Via the UNPKG CDN. ### 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 ``` -Alternatively you can select a specific TextArea, via Javascript. +Alternatively you can select a specific TextArea, via Javascript: + ```html ``` -Or via jQuery. +Or via jQuery: + ```html ``` -Use EasyMDE.value(val) to set the content of the editor. +Use EasyMDE.value(val) to set the content of the editor: + ```html