Easy Extensible Mardown Editor In JavaScript – Downarea

Category: Javascript , Text | August 22, 2021
Author:fatihege
Views Total:363 views
Official Page:Go to website
Last Update:August 22, 2021
License:MIT

Preview:

Easy Extensible Mardown Editor In JavaScript – Downarea

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

You Might Be Interested In:


Leave a Reply