DownArea is an easy-to-use, lightweight, and extensible JavaScript markdown editor library.
Must Read: Configurable, Embeddable, Extensible Vue Markdown Editor
How to make use of it:
1. Insert the Downarea’s JavaScript and Stylesheet into the document.
<link rel="stylesheet" href="src/downarea.min.css" /> <script src="src/downarea.min.js"></script>
2. Create an empty container for the markdown editor.
<div class="editor"></div>
3. Initialize the markdown editor.
var downarea = new DownArea({ elem: document.querySelector('.editor'), });
4. Enable/disable the resizer:
var downarea = new DownArea({ elem: document.querySelector('.editor'), resize: DownArea.RESIZE_BOTH, });
5. Hide editor buttons. All out there editor buttons:
var downarea = new DownArea({ elem: document.querySelector('.editor'), hide: ['bold-italic', 'link'] });
6. API.
downarea.addHeading(1-6); downarea.addBold(); downarea.addItalic(); downarea.addItalic(); downarea.addLink(0 or 1); downarea.addEmail(); downarea.addImage(); downarea.addBlockquote(); downarea.addUnorderedList(); downarea.addOrderedList(); downarea.addSingleLineCode(); downarea.addCodeBlock();
Tools
Must Read: jQuery Wysiwyg-style Markdown Editor Plugin
Key | Name |
---|---|
heading | Headings |
bold | Bold |
italic | Italic |
bold-italic | Bold Italic |
link | Links |
image | Image |
blockquote | Blockquote |
u-list | Unordered List |
o-list | Ordered List |
sl-code | Single Line Code |
code-block | Code Block |
All Arguments
Must Read: Online Markdown Editor With Vue Component | MkDown
Key | Description |
---|---|
elem | DownArea container DIV or TextArea |
attr | If the elem the key is given the textarea element, the values of the ID, and the class attributes of the container element. |
resize | Editor’s resizer options. |
hide | Tools to hide. |
name | The value of the textarea’s name attribute. |
value | The content of the textarea. |
Tool Methods (Public Methods)
Must Read: Markdown WYSIWYG Editor | GFM Standard + Chart & UML Extensible
Tool Key | Method | Args |
---|---|---|
heading-1 | .addHeading(level: number = 1) | default (1) |
heading-2 | .addHeading(level: number = 1) | 2 |
heading-3 | .addHeading(level: number = 1) | 3 |
heading-4 | .addHeading(level: number = 1) | 4 |
heading-5 | .addHeading(level: number = 1) | 5 |
heading-6 | .addHeading(level: number = 1) | 6 |
bold | .addBold() | empty |
italic | .addItalic() | empty |
bold-italic | .addItalic() | empty |
normal-link | .addLink(type: number = 0) | default (0) |
quick-link | .addLink(type: number = 0) | 1 |
.addEmail() | empty | |
image | .addImage() | empty |
blockquote | .addBlockquote() | empty |
u-list | .addUnorderedList() | empty |
o-list | .addOrderedList() | empty |
sl-code | .addSingleLineCode() | empty |
code-block | .addCodeBlock() | empty |
See Demo And Download

Official Website(fatihege): Click Here
This superior jQuery/javascript plugin is developed by fatihege. For extra Advanced usage, please go to the official website.