Redux: Add a button to your wyswyg html bar in WP -Code2

As a follow up to Add a button to your wyswyg html bar in WP. I wanted to create a code button that prompts me for the code language. And if there’s none then use the simple tag.

So back to blog/wp-includes/js/quicktags.js. This time I needed to do more than add a simple button.
After a few attempts to do this from scratch I realized that I needed a function similar to the add link function that the link button uses.

Tool bar screenshot

Tool bar screenshot

So the simple button I added to enable the Ion Snytax Highlighter was the starting point. I just wanted to update the code to reflect the new desired functionality.
So first things first open the dev version of the quicktags javascript file: blog/wp-includes/js/quicktags.dev.js.


To Do List:

  1. Copy all the code related to the link button *(jump down the page for more details)
  2. Next update all my _code2 references to match the _link references. *(jump down the page for more details)
  3. Back up the quicktags.js file
  4. Save the quicktags.dev as quicktags.js and upload it
  5. Test your form; click the button or use the alt key Command+2 or Alt+2
  6. Check Reference / Relevant Links for more info

Note: In the testing phase of this I’m not going to bother removing the white space from this file.

Success! It works. Now I click the button and get prompted for the language. If there is none then I leave it blank and get the simple code tag.
It might be nice to track down the supported languages but not worth it at this point.

Back to the list.
Copy all the code related to the link button:
[line #49]

edButtons[edButtons.length] =
new edButton('ed_link'
,'link'
,''
,'</a>'
,'a'
); // special case

[line #155]

function edShowButton(button, i) {
...
	else if (button.id == 'ed_link') {
		document.write('');
	}

[line #362]

function edInsertLink(myField, i, defaultValue) {
	if (!defaultValue) {
		defaultValue = 'http://';
	}
	if (!edCheckOpenTags(i)) {
		var URL = prompt(quicktagsL10n.enterURL, defaultValue);
		if (URL) {
			edButtons[i].tagStart = '<a href="' + URL + '">';
			edInsertTag(myField, i);
		}
	}
	else {
		edInsertTag(myField, i);
	}
}

[line #406]

	t.edShowButton = function(button, i) {
...
		else if (button.id == name+'_link')
			return '';

[line #550]

	t.Buttons[t.Buttons.length] = new edButton(name+'_link','link','','</a>','a'); // special case

[line #524]

	this.edInsertLink = function(i, defaultValue) {
		if ( ! defaultValue )
			defaultValue = 'http://';

		if ( ! t.edCheckOpenTags(i) ) {
			var URL = prompt(quicktagsL10n.enterURL, defaultValue);
			if ( URL ) {
				t.Buttons[i].tagStart = '<a href="' + URL + '">';
				t.edInsertTag(i);
			}
		} else {
			t.edInsertTag(i);
		}
	};

Back to the list.
Next update all my _code2 references to match the _link references.
[line #123]

edButtons[edButtons.length] =
new edButton('ed_code2'
,'code2'
,''
,'[/code]'
,'2'
); // special case

[line #170]

	else if (button.id == name+'ed_code2') {
		document.write('');
	}

[line #389]

	function edLangOption(myField, i, defaultValue) {
		if (!defaultValue) {
			defaultValue = '';
        }
		if (!edCheckOpenTags(i)) {
			var langOptPrompt = prompt("Code Language?", defaultValue);
			if (langOptPrompt) {
				edButtons[i].tagStart = '';
				edInsertTag(myField, i);
			}
            else {
            	edButtons[i].tagStart = '';
				edInsertTag(myField, i);
			}
		} else {
			edInsertTag(myField, i);
		}
	};

[line #443]

		else if (button.id == name+'_code2')
			return '';

[line #571]

	this.edLangOption = function(i, defaultValue) {
		if ( ! defaultValue )
			defaultValue = '';

		if ( ! t.edCheckOpenTags(i) ) {
			var langOptPrompt = prompt("Code Language?", defaultValue);
			if ( langOptPrompt ) {
				t.Buttons[i].tagStart = '[lang="'+langOptPrompt+'"]';
				t.edInsertTag(i);
			}
            else {
            	t.edButtons[i].tagStart = '';
				t.edInsertTag(i);
			}
		} else {
			t.edInsertTag(i);
		}
	};

[line #612]

	t.Buttons[t.Buttons.length] = new edButton(name+'_code2','code2','','[/code]','2'); // special case

Back to the list.
Relevant links:


Here is the quicktags.js file as it stands now.

Comments
  • Vid says:

    Just updated to WordPress 3.1 and I didn’t need to make any changes to my quicktags.js file. Just drop it in the wp-includes/js/ dir. and we’re good to go.

Leave a Comment