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] 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).