Search code examples
javascripttextareawysiwygmarkdownwmd

Adding custom buttons to WMD Editor

Is there a way to add custom buttons to the WMD Editor that extends the editor's functionality?

My ideas for various buttons I want to add are to:

  • Markup the selected text
  • Insert some predefined text

Thanks
Turgs

Solution

  • Yes, you can.

    1) you need extend the Images "wmd-buttons.jpg"

    edit the image and add a button for extended functionality. 2) Add Script for the button to bind with an event(like inserting some text)

            var Insertbutton= document.createElement("li");
        Insertbutton.className = "wmd-button";
        Insertbutton.id = "wmd-insertsometext-button";
        Insertbutton.title = "Emphasis <em> Ctrl+v";
        Insertbutton.XShift = "-60px";
        Insertbutton.textOp = command.inserttext;
        setupButton(inserttextButton, true);
        buttonRow.appendChild(inserttextButton);

    3) Now Define inserttext function and place your insertion code.