Netsyms/easy-markdown-editor
2
0
Fork 0
mirror of https://github.com/Ionaru/easy-markdown-editor synced 2025-09-24 16:40:55 -06:00
Code Issues Releases Wiki Activity

Merge 0dbfa60c6a987523136ce72fc46774d040ecddee into 2adb4dcfa1091070d9113d4b9a7b79fe00ef2167

Browse Source
This commit is contained in:
norman santiago 2018-04-26 06:04:17 +00:00 committed by GitHub
commit 65260879a5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 35 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
README.md
View File

@ -1,7 +1,7 @@
# EasyMDE is a fork of SimpleMDE # EasyMDE is a fork of SimpleMDE
This repository is a fork of [SimpleMDE, made by Sparksuite](https://github.com/sparksuite/simplemde-markdown-editor/). This repository is a fork of [SimpleMDE, made by Sparksuite](https://github.com/sparksuite/simplemde-markdown-editor/).
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. I originally made this fork to implement FontAwesome 5 compatibility into EasyMDE. 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: Changes include:
* FontAwesome 5 compatibility * FontAwesome 5 compatibility
@ -75,37 +75,30 @@ easyMDE.value('New input for **EasyMDE**');
Below is the original [README](https://github.com/sparksuite/simplemde-markdown-editor/), rewrite for EasyMDE in progress. Below is the original [README](https://github.com/sparksuite/simplemde-markdown-editor/), rewrite for EasyMDE in progress.
# SimpleMDE - Markdown Editor # EasyMDE - Markdown Editor
A drop-in JavaScript textarea replacement for writing beautiful and understandable Markdown. The WYSIWYG-esque editor 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. SimpleMDE is one of the first editors to feature both built-in autosaving and spell checking. A drop-in JavaScript textarea replacement for writing beautiful and understandable Markdown. The WYSIWYG-esque editor 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 is one of the first editors to feature both built-in autosaving and spell checking.
[**Demo**](https://simplemde.com) [**Demo**](https://simplemde.com)
[![Preview](http://i.imgur.com/zqWfJwO.png)](https://simplemde.com) [![Preview](http://i.imgur.com/zqWfJwO.png)](https://simplemde.com)
## Why not a WYSIWYG editor or pure Markdown? ## Why not a WYSIWYG editor or pure Markdown?
WYSIWYG editors that produce HTML are often complex and buggy. Markdown solves this problem in many ways, plus Markdown can be rendered natively on more platforms than HTML. However, Markdown is not a syntax that an average user will be familiar with, nor is it visually clear while editing. In otherwords, for an unfamiliar user, the syntax they write will make little sense until they click the preview button. SimpleMDE has been designed to bridge this gap for non-technical users who are less familiar with or just learning Markdown syntax. WYSIWYG editors that produce HTML are often complex and buggy. Markdown solves this problem in many ways, plus Markdown can be rendered natively on more platforms than HTML. However, Markdown is not a syntax that an average user will be familiar with, nor is it visually clear while editing. In otherwords, for an unfamiliar user, the syntax they write will make little sense until they click the preview button. EasyMDE has been designed to bridge this gap for non-technical users who are less familiar with or just learning Markdown syntax.
## Install ## Install
Via [npm](https://www.npmjs.com/package/simplemde). Via [npm](https://www.npmjs.com/package/easymde).
``` ```
npm install simplemde --save npm install easymde --save
```
Via [jsDelivr](https://www.jsdelivr.com/).
```HTML
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sparksuite/simplemde-markdown-editor@1/dist/simplemde.min.css">
<script src="https://cdn.jsdelivr.net/gh/sparksuite/simplemde-markdown-editor@1/dist/simplemde.min.js"></script>
``` ```
## Quick start ## Quick start
After installing, load SimpleMDE on the first textarea on a page After installing, load EasyMDE on the first textarea on a page
```HTML ```HTML
<script> <script>
var simplemde = new SimpleMDE(); var easymde = new EasyMDE();
</script> </script>
``` ```
@ -115,7 +108,7 @@ Pure JavaScript method
```HTML ```HTML
<script> <script>
var simplemde = new SimpleMDE({ element: document.getElementById("MyID") }); var easymde = new EasyMDE({ element: document.getElementById("MyID") });
</script> </script>
``` ```
@ -123,18 +116,18 @@ jQuery method
```HTML ```HTML
<script> <script>
var simplemde = new SimpleMDE({ element: $("#MyID")[0] }); var easymde = new EasyMDE({ element: $("#MyID")[0] });
</script> </script>
``` ```
## Get/set the content ## Get/set the content
```JavaScript ```JavaScript
simplemde.value(); easymde.value();
``` ```
```JavaScript ```JavaScript
simplemde.value("This text will appear in the editor"); easymde.value("This text will appear in the editor");
``` ```
## Configuration ## Configuration
@ -144,13 +137,13 @@ simplemde.value("This text will appear in the editor");
- **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`, autosave the text. 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 SimpleMDE can autosave. Something that separates this from other instances of SimpleMDE 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.
- **bold**: Can be set to `**` or `__`. Defaults to `**`. - **bold**: Can be set to `**` or `__`. Defaults to `**`.
- **code**: Can be set to ```` ``` ```` or `~~~`. Defaults to ```` ``` ````. - **code**: Can be set to ```` ``` ```` or `~~~`. Defaults to ```` ``` ````.
- **italic**: Can be set to `*` or `_`. Defaults to `*`. - **italic**: Can be set to `*` or `_`. Defaults to `*`.
- **element**: The DOM element for the textarea to use. Defaults to the first textarea on the page. - **element**: The DOM element for the textarea to use. Defaults to the first textarea on the page.
- **forceSync**: If set to `true`, force text changes made in SimpleMDE to be immediately stored in original textarea. Defaults to `false`. - **forceSync**: If set to `true`, force text changes made in EasyMDE to be immediately stored in original textarea. Defaults to `false`.
- **hideIcons**: An array of icon names to hide. Can be used to hide specific icons shown by default without completely customizing the toolbar. - **hideIcons**: An array of icon names to hide. Can be used to hide specific icons shown by default without completely customizing the toolbar.
- **indentWithTabs**: If set to `false`, indent using spaces instead of tabs. Defaults to `true`. - **indentWithTabs**: If set to `false`, indent using spaces instead of tabs. Defaults to `true`.
- **initialValue**: If set, will customize the initial value of the editor. - **initialValue**: If set, will customize the initial value of the editor.
@ -189,7 +182,7 @@ simplemde.value("This text will appear in the editor");
```JavaScript ```JavaScript
// Most options demonstrate the non-default behavior // Most options demonstrate the non-default behavior
var simplemde = new SimpleMDE({ var easymde = new EasyMDE({
autofocus: true, autofocus: true,
autosave: { autosave: {
enabled: true, enabled: true,
@ -292,21 +285,21 @@ horizontal-rule | drawHorizontalRule | Insert Horizontal Line<br>fa fa-minus
preview | togglePreview | Toggle Preview<br>fa fa-eye no-disable preview | togglePreview | Toggle Preview<br>fa fa-eye no-disable
side-by-side | toggleSideBySide | Toggle Side by Side<br>fa fa-columns no-disable no-mobile side-by-side | toggleSideBySide | Toggle Side by Side<br>fa fa-columns no-disable no-mobile
fullscreen | toggleFullScreen | Toggle Fullscreen<br>fa fa-arrows-alt no-disable no-mobile fullscreen | toggleFullScreen | Toggle Fullscreen<br>fa fa-arrows-alt no-disable no-mobile
guide | [This link](https://simplemde.com/markdown-guide) | Markdown Guide<br>fa fa-question-circle guide | [This link](https://easymde.com/markdown-guide) | Markdown Guide<br>fa fa-question-circle
Customize the toolbar using the `toolbar` option like: Customize the toolbar using the `toolbar` option like:
```JavaScript ```JavaScript
// Customize only the order of existing buttons // Customize only the order of existing buttons
var simplemde = new SimpleMDE({ var easymde = new EasyMDE({
toolbar: ["bold", "italic", "heading", "|", "quote"], toolbar: ["bold", "italic", "heading", "|", "quote"],
}); });
// Customize all information and/or add your own icons // Customize all information and/or add your own icons
var simplemde = new SimpleMDE({ var easymde = new EasyMDE({
toolbar: [{ toolbar: [{
name: "bold", name: "bold",
action: SimpleMDE.toggleBold, action: EasyMDE.toggleBold,
className: "fa fa-bold", className: "fa fa-bold",
title: "Bold", title: "Bold",
}, },
@ -326,7 +319,7 @@ var simplemde = new SimpleMDE({
#### Keyboard shortcuts #### Keyboard shortcuts
SimpleMDE 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: 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:
Shortcut | Action Shortcut | Action
:------- | :----- :------- | :-----
@ -348,7 +341,7 @@ Shortcut | 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 simplemde = new SimpleMDE({ var easymde = 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
@ -365,31 +358,31 @@ 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 simplemde = new SimpleMDE(); var easymde = new EasyMDE();
simplemde.codemirror.on("change", function(){ easymde.codemirror.on("change", function(){
console.log(simplemde.value()); console.log(easymde.value());
}); });
``` ```
## Removing SimpleMDE 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 SimpleMDE instance. 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 ```JavaScript
var simplemde = new SimpleMDE(); var easymde = new EasyMDE();
... ...
simplemde.toTextArea(); easymde.toTextArea();
simplemde = null; easymde = null;
``` ```
## Useful methods ## Useful methods
The following self-explanatory methods may be of use while developing with SimpleMDE. The following self-explanatory methods may be of use while developing with EasyMDE.
```js ```js
var simplemde = new SimpleMDE(); var easymde = new EasyMDE();
simplemde.isPreviewActive(); // returns boolean easymde.isPreviewActive(); // returns boolean
simplemde.isSideBySideActive(); // returns boolean easymde.isSideBySideActive(); // returns boolean
simplemde.isFullscreenActive(); // returns boolean easymde.isFullscreenActive(); // returns boolean
simplemde.clearAutosavedValue(); // no returned value easymde.clearAutosavedValue(); // no returned value
``` ```
## How it works ## How it works