Easy Extensible Mardown Editor In JavaScript – Downarea

Preview:

Description:

Downarea is a lightweight, responsive, resizable, and extensible markdown editor written in pure JavaScript.

How to use 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 and done.

var downarea = new DownArea({
    elem: document.querySelector('.editor'),
});

4. Enable/disable the resizer:

• DownArea.RESIZE_OFF
• DownArea.RESIZE_VERTICAL
• DownArea.RESIZE_HORIZONTAL
• DownArea.RESIZE_BOTH

var downarea = new DownArea({
    elem: document.querySelector('.editor'),
    resize: DownArea.RESIZE_BOTH,
});

5. Hide specific editor buttons. All available editor buttons:

• heading
• bold
• italic
• bold-italic
• link
• image
• blockquote
• u-list
• o-list
• sl-code
• code-block

var downarea = new DownArea({
    elem: document.querySelector('.editor'),
    hide: ['bold-italic', 'link']
});

6. API methods.

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();

Changelog:

v1.3.0 (08/22/2021)

• Added re-use feature of existing Textarea