MTE.js WYSIWYG Markdown Text Editor Plugin

MTE.js is a JavaScript library used to display a simple WYSIWYG text editor in a document.

github wysiwyg markdown editor, toast ui editor, wysiwyg markdown editor online, markdown editor demo, markdown editor js

Super Simple Lightweight Editor For Web | Summernote

How to make use of it:

1. Include Font Awesome 4 for tag editor icons.

<link rel="stylesheet" href="font-awesome.min.css">

2. Embed Markdown Text Editor files into an HTML page.

<link href="css/mte.css" rel="stylesheet">
<script src="js/editor.min.js"></script>
<script src="js/mte.js"></script>

3. Create a text area for the Markdown text editor.

<textarea class="editor-area" id="editor-area" spellcheck="false">

4. Configure the Markdown text editor.

var myEditor = new MTE(document.getElementById('editor-area'), {
    tabSize: '    ',
    shortcut: true,
    keydown: function(e, base) {
        console.log('Updated! (keydown:' + base.grip.key(e) + ')');
    update: function() {
    click: function(e, base, type) {
        console.log('Updated! (click:' + type + ')');
    ready: function() {
    cut: function(selection) {
    copy: function(selection) {
    paste: function(selection) {

5. Dedicated and modal button.

myEditor.button('strikethrough another-class-goes-here another-another-class-goes-here', {
    title: 'Strike',
    position: 3,
    click: function(e, base) {
        base.grip.toggle('~~', '~~');
myEditor.button('warning', {
    title: 'Example Alert Box',
    click: function(e, base) {
        base.alert('Alert Box', 'This is an alert box.');
myEditor.button('question-circle', {
    title: 'Example Confirm Box',
    click: function(e, base) {
        base.confirm('Confirm Box', 'This is a confirm box.', {
            OK: function() {
            CANCEL: function() {
myEditor.button('pencil', {
    title: 'Example Custom Modal',
    click: function(e, base) {
        base.modal('my-modal', function(overlay, modal, header, content, footer) {
            var btn = document.createElement('button');
            btn.innerHTML = 'Save';
            btn.onclick = function() {
                return false;
            header.innerHTML = 'Test Modal'; // Header
            content.innerHTML = '<img src=" ">'; // Content
            footer.appendChild(btn); // Footer

6. Custom dropdown list.

myEditor.button('paint-brush', {
    title: 'Example Drop',
    click: function(e, base) {
        base.drop('color', function(drop) {
            var colors = ['#5FB0E6', '#86CDEA', '#86BAA3', '#706D45'], color;
            drop.innerHTML = "";
            for (var i in colors) {
                color = document.createElement('span');
                color.className = 'color';
                color.title = colors[i];
       = colors[i];
                color.onclick = function() {
                    base.grip.wrap('<span style="color:' + this.title + ';">', '</span>');

7. Custom toolbar separator.

myEditor.separator({position: 4});

8. API abbreviation.

myEditor.shortcut('ctrl+f', function() {
    return myEditor.prompt('Search', "", true, function(v) {
        var start = myEditor.grip.area.value.toLowerCase().indexOf(v.toLowerCase());
        if (start !== -1) {
  , start + v.length);
        } else {
            myEditor.alert('Not Found', 'Can&rdquo;t find &ldquo;' + v + '&rdquo;.');
    }), false;

Simple WYSIWYG Markdown Editor, Markdown Text Editor Plugin/Github

See Demo And Download

Official Website(taufik-nurrohman): Click Here

This superior jQuery/javascript plugin is developed by taufik-nurrohman. For extra Advanced usage, please go to the official website.

Related Posts


Responsive Drag and Drop File Uploader/Download Plugin | 5x5_jq_uploader

5x5_jq_uploader plugin can be used to instantly create a drop file area and file queue with a little bit of preparation. Bootstrap is used for responsive planning…


Stylesheet For Implementing Dark Mode with Bootstrap

Bootstrap Dark Mode provides a style sheet and two texts that allow you to implement Dark Mode on your website. Initially loaded based on user preferences, can…


Multi-purpose Navigation Menu for Javascript Library | jQuery Corenav

coreNavigation is a multipurpose navigation menu for a jquery based javascript library, comes with more style, and is easy to integrate. 11 Default Menu 2 Responsive Navigation…


Simple Multi-Select Dropdown Pure Vanilla Javascript | multiSelect.js

MultiSelect.js is a simple, clean, and progressive JavaScript library designed for easy integration with any type of project or system. The design was heavily influenced by the…


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


How To Create A Popup in HTML with CSS

How to create popup in html with css – Popup without JavaScript is an elegant pop-up panel component with an animated scale, written in CSS. Have you…