Now we need to add the javascript to create our button. Quicktags' javascript code come from the file wp-includes/js/quicktags.js. If you look in that file, you'll discover that the <div> element that holds the Quicktags has an HTML ID of "ed_toolbar" and that each button has a class of "ed_button". So we need some javascript to create a button of class "ed_button" and append it to the "ed_toolbar" div. This next bit of code replaces the "JAVASCRIPT WILL GO HERE" comment above.

var pluggy_toolbar = document.getElementById("ed_toolbar");

if (pluggy_toolbar) {
  var theButton = document.createElement('input');
  theButton.type = 'button';
  theButton.value = 'Pluggy';
  theButton.onclick = pluggy_button;
  theButton.className = 'ed_button';
  theButton.title = 'Pluggy!';
  theButton.id = 'ed_Pluggy';
  pluggy_toolbar.appendChild(theButton);
}

If you add all of that code to your plugin and then visit the Write Post page, you'll see a button called "Pluggy!", assuming that you're using the regular editor. Success! Except that the button doesn't do anything yet. Thanks to the onclick value it wants to call the function pluggy_button(), but that doesn't exist. We need to write that function. Add this snippet of javascript after the above bit:

function pluggy_button(querystr) {
  alert("Pluggy button pressed!");
  return false;
}

and that will make the button pop up an alertbox when you push it. If this were a more complicated plugin, we could use the pluggy_button() javascript function to pop open a new window or insert code into the editor window. I'll leave those as an exercise for the reader, though you can see an example of popping open a UI window in my Simple Popup Images plugin.

Adding a Button to the Visual Rich Editor

The visual rich editor has pretty graphical buttons for you to push. You really don't want to add a new one of those.

I mean it. For full functionality, you'll have to write a TinyMCE plugin, and that's a process that's even more sketchily documented than that of writing WP plugins, plus you have to write your plugin in javascript.

If you're determined to write a TinyMCE plugin, all I can do is point you to the TinyMCE documentation; mention the tinymce_before_init, tinymce_plugins, and tinymce_buttons filters that WordPress has made available; show you other TinyMCE plugins, and wish you the best.

There are other, easier options than creating a graphical button and writing a new plugin. WordPress 2.1 introduced the Code tab in the visual rich editor. If you open the Code tab, you'll see the usual array of Quicktags...including our new one. But what if you want to support the WP 2.0 branch? You can't easily add a button, but you can add a nice link just below the editor that will do the same thing as the button. We'll add an invisible <div> to every post page and, if the Quicktags aren't available, make that div visible and move it into position.

Above the <script type="text/javascript"> in your code, add the following:

[a href="#" onclick="return pluggy_open('tinymce=true')"]Pluggy![/a]

(Note that, for code-posting reasons, I have changed the <a> in the code snippet to [a]. Change the []s to angle brackets for it to work.) After the "if {}" block of javascript code that creates the Quicktag button, add:

else {
  var pluggyLink = document.getElementById("pluggy_link");
  var pingBack = document.getElementById("pingback");
  if (pingBack == null)
    var pingBack = document.getElementById("post_pingback");
  if (pingBack == null) {
    var pingBack = document.getElementById("savepage");
    pingBack = pingBack.parentNode;
  }
  pingBack.parentNode.insertBefore(pluggyLink, pingBack);
  pluggyLink.style.display = 'block';
}

That bit of javascript makes the <div> with our link visible and moves it to just before the secret hidden pingback input elements that come right after the editor. Tah-dah!

Bonus Topic 1: Inserting Text in the Editor

Your plugin, like mine, may pop up a window, do some processing, and return, inserting some text into the editor window. You can do that with two javascript functions:

// Insert myValue into an editor window
function insertHtml(myValue) {
        if(window.tinyMCE)
                window.opener.tinyMCE.execCommand("mceInsertContent",true,myVal\
ue);
        else
                insertAtCursor(window.opener.document.post.content, myValue);
        window.close();
}

// Insert text into the WP regular editor window
function insertAtCursor(myField, myValue) {
        //IE support
        if (document.selection && !window.opera) {
                myField.focus();
                sel = window.opener.document.selection.createRange();
                sel.text = myValue;
        }
        //MOZILLA/NETSCAPE/OPERA support
        else if (myField.selectionStart || myField.selectionStart == '0') {
                var startPos = myField.selectionStart;
                var endPos = myField.selectionEnd;
                myField.value = myField.value.substring(0, startPos)
                + myValue
                + myField.value.substring(endPos, myField.value.length);
        } else {
                myField.value += myValue;
        }
}

Calling insertHtml('some text') will paste that text in the editor window.

Bonus Topic 2: Adding HTML-Like Tags to the Visual Rich Editor

For your plugin, you may end up inventing an HTML-like tag to be filtered later. For example, the WP-FLV plugin adds an <flv> tag that, when a post is displayed, is converted to a flash-embedded object.

TinyMCE won't like that. It strips out tags it doesn't know anything about. To make TinyMCE like your new tag, you need to add it to TinyMCE's list of valid elements. WordPress gives you a filter for doing that: mce_valid_elements. Define your tag using the TinyMCE format for valid elements and then add it to the valid elements list using the mce_valid_elements filter.

You know what? Let me show you an example. Let's say you've defined a new <pluggy> tag for your plugin. It can have two attributes called "width" and "height". To get the visual rich editor to leave your tag alone, do the following:

add_filter('mce_valid_elements', 'pluggy_mce_valid_elements', 0);

function pluggy_mce_valid_elements($valid_elements) {
  $valid_elements .= 'pluggy[width|height]';
  return $valid_elements;
}

The "pluggy[width|height]" is the TinyMCE valid element string. Now TinyMCE won't get rid of any <pluggy> tags when your users are writing their posts.

One other note. When I used this trick, I used a single self-closing tag, like <pluggy />. TinyMCE automatically turns this into <pluggy></pluggy>, and there's nothing you can do short of hacking the editor's javascript. Just a word of advice.

Conclusion and Downloads

That's it. I hope you found this article helpful. If you'd rather not type in all of the code above, you can get two files that have the code already entered for you.

• quicktags.php for adding Quicktag buttons
• insert-text.js for inserting text into the editor window