How to add a custom Markdown function to SimpleMDE

Question

Currently using this Markdown WYSIWYG editor. I needed to extend Markdown with one function (!!text!! to create red text) and have successfully done so on the server side, but as one who struggles with JavaScript, I'm having difficulty doing the same for this library.

Answer 1

Try this:

var myEditor = new SimpleMDE({
    toolbar: [
        {
            name: "redText",
            action: drawRedText,
            className: "fa fa-bold", // Look for a suitable icon
            title: "Red text (Ctrl/Cmd-Alt-R)",
        }
    ]
});

function drawRedText(editor) {

    var cm = editor.codemirror;
    var output = '';
    var selectedText = cm.getSelection();
    var text = selectedText || 'placeholder';

    output = '!!' + text + '!!';
    cm.replaceSelection(output);

}

You will have to add to the toolbar array the rest of the buttons you may need. Check them at the official GitHub repo.