Author: Jani

I’ve modified my quicktags.js to include a button for fast adding of <span lang="language of choice">...</span> pairs. Gotta keep those 0.03 voice browser users happy, you know! (All right, I pulled that figure out of my hat. Truth is, I don’t know if any of my blogs have any readers using text-to-speech synthesizers. But I’m opting on the safe side and trying to make most of my content accessible for such users by tagging it with the appropriate lang= parameters.)

I was hoping to whip these modifications up into a plugin to be dropped into any modern WordPress installation, but it seems that documentation on how to make plugins add quicktags is non-existent, and I couldn’t make it work on my own. Every plugin author seems to have their own way of doing it and yet I was unable to find anything that would work for me.

So I’ll have to settle for making my changes to quicktags.js known here.

I begin by adding these lines into quicktags.js:

edButtons[edButtons.length] =
new edButton('ed_lang'
,'lang='
,''
,'</span>'
,'l'
);

function edSpanLang(myField, i) {
	langSelect = document.getElementById('edLang');
	langLang = langSelect.options[langSelect.selectedIndex].value;
	if (!edCheckOpenTags(i)) {
		edButtons[i].tagStart = '<span lang="' + langLang + '">';
		edInsertTag(myField, i);
	}
	else {
		edInsertTag(myField, i);
	}
}

Next, I change the edShowButton() function to include one additional else if -branch, like so:

else if (button.id == 'ed_lang') {
  document.write('<input type="button" id="' + button.id
  + '" accesskey="' + button.access + '" class="ed_button"
  onclick="edSpanLang(edCanvas, ' + i + ');" value="'
  + button.display + '" />\\n<form>\\n<select id="edLang">\\n<option
  value="en">en: English</option>\\n<option value="de">de:
  German</option>\\n<option value="fi">fi: Finnish</option>\\n<option
  value="sv">sv: Swedish</option>\\n</select>\\n</form>');
}

(Sheesh, it's a pain to try and format code inside a WordPress post. I tried to make sure there are no typos but if something breaks after applying these changes, I probably missed one or two. You'll have to use your own eyes and skillz in that case.)

Adding further languages into the drop down list is as easy as adding another <option value="your two-letter language code of choice">your two-letter language code again: your plain English language name</option>\n pair in between the <form>...</form> block. As a Finn, I find the four languages listed in my example to be sufficient for most cases. (Now that I've said it, I realize that I should add French there as well. There's at least as much use for it as there is for German.)

Here's my current (24.5.2007 22.6.2007 19.10.2007) quicktags.js for reference. Note that it has three buttons for my Post Changelog Plugin: history, edit and at. Without the plugin, the code they produce will not work.