Update README.md

pull/75/head
Wes Cossick 9 years ago
parent 13ac58b237
commit 2b4fbc27b8

@ -1,20 +1,20 @@
# Markdownify - Markdown Editor
A drop-in JavaScript textarea replacement for writing beautiful and understandable markdown. The WYSIWYG-esque editor allows you to modify the markdown with toolbar buttons and shortcuts. It has been designed to be easy to use by users who are less technical.
# SimpleMDE - Markdown Editor
A drop-in JavaScript textarea replacement for writing beautiful and understandable markdown. The WYSIWYG-esque editor allows users to modify the markdown with toolbar buttons and shortcuts. WYSIWYG editors that produce HTML are often complex and buggy. Markdown solves this problem in many ways, but is less visually clear while editing. SimpleMDE has been designed to bridge this gap for non-technical users who are less familiar with or just learning Markdown syntax.
![Preview](http://i.imgur.com/l5antiW.png)
## Quickstart
```
<link rel="stylesheet" href="/PATH/TO/markdownify.min.css">
<script src="/PATH/TO/markdownify.min.js"></script>
<link rel="stylesheet" href="/PATH/TO/simplemde.min.css">
<script src="/PATH/TO/simplemde.min.js"></script>
```
And then load Markdownify on the first textarea on a page
And then load SimpleMDE on the first textarea on a page
```
var markdownify = new Markdownify();
markdownify.render();
var simplemde = new SimpleMDE();
simplemde.render();
```
#### Use a specific textarea
@ -22,21 +22,21 @@ markdownify.render();
Pure JavaScript method
```
var markdownify = new Markdownify(document.getElementById("MyID"));
markdownify.render();
var simplemde = new SimpleMDE(document.getElementById("MyID"));
simplemde.render();
```
jQuery method
```
var markdownify = new Markdownify($("#MyID")[0]);
markdownify.render();
var simplemde = new SimpleMDE($("#MyID")[0]);
simplemde.render();
```
## Get the content
```
markdownify.codemirror.getValue();
simplemde.codemirror.getValue();
```
## Configuration
@ -46,7 +46,7 @@ markdownify.codemirror.getValue();
- **tools**: If set false, hide the toolbar. Defaults to true.
```
new Markdownify({
new SimpleMDE({
element: document.getElementById("MyID"),
status: false,
tools: false,
@ -54,12 +54,12 @@ new Markdownify({
```
## How it works
Markdownify is an improvement of [lepture's Editor project](https://github.com/lepture/editor) and includes a great many number of changes. It is bundled with [CodeMirror](https://github.com/codemirror/codemirror) and [Font Awesome](http://fortawesome.github.io/Font-Awesome/).
SimpleMDE is an improvement of [lepture's Editor project](https://github.com/lepture/editor) and includes a great many number of changes. It is bundled with [CodeMirror](https://github.com/codemirror/codemirror) and [Font Awesome](http://fortawesome.github.io/Font-Awesome/).
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 statusbar has been added to the top and bottom, respectively. Previews are rendered by [Marked](https://github.com/chjj/marked).
## What's changed?
As mentioned earlier, Markdownify is an improvement of [lepture's Editor project](https://github.com/lepture/editor). So you might be wondering, what's changed? Quite a bit actually. Here's some notable changes:
As mentioned earlier, SimpleMDE is an improvement of [lepture's Editor project](https://github.com/lepture/editor). So you might be wondering, what's changed? Quite a bit actually. Here's some notable changes:
- Upgraded from CodeMirror 3 to CodeMirror 5
- Many changes to the style, appearance, and userfriendliness

Loading…
Cancel
Save