edje-markdown-editor v1.1.7

Edje Markdown Editor

A StackOverflow-style interface for using Markdown with textareas.

• Pure JavaScript - No jQuery or other library.

• Lightweight - Only 5.3 KB gzipped.

• 100% Compatible - It's still a plain textarea, so no need to worry about lag on mobile.

How to Install

MANUAL

Get the CSS and JS in /dist directory and link them in your website.

NPM PACKAGE

Add this in your package: "hrsetyono/h-editor": "~1.1.2". Code sample for Vue can be found below.

How to Use

hMarkdownEditor( $textarea, [args] )

$textarea (Node) - The textarea that you want to add buttons to.

args (Object / optional)

• buttons (array) - Specify the order of buttons.

  Default: [ 'bold', 'italic', 'link', '|', 'bullist', 'numlist', 'image', 'quote' ],

  Pipe symbol (|) means separator.

  Other available buttons: h1, h2, h3, code, pre, hr, strike, undo, redo

Example (Native JS)

<textarea id="comment"></textarea>

<script>
document.addEventListener('DOMContentLoaded', () => {
  'use strict';

  let $textarea = document.querySelector( '#comment' );
  if( $textarea ) {
    hMarkdownEditor( $textarea, {
      buttons: [ 'bold', 'italic', 'link', '|', 'bullist', 'numlist', 'image', 'quote' ],
    } );
  }
});
</script>

If you use jQuery:

let $textarea = $('#comment');

hMarkdownEditor( $textarea.get(0), { ... } );

Example (Vue)

<template>
  <textarea ref="content" v-model="content">
</template>
<script>
  import hMarkdownEditor from 'edje-markdown-editor';
  import 'edje-markdown-editor/dist/main.css';

  export default {
    ...
    mounted() {
      this.$nextTick( () => {
        hMarkdownEditor( this.$refs.content );
      });
    },
    ...
  }
</script>

Known Bugs

• In Firefox, you can't undo the tag insertion. This is due to this Firefox bug

Credit

This is a fork of MarkdownEditor with added features like List and Inline Code. So big thanks to Digital Nature for creating an awesome basis for this library.