Sep
30
2007

Hacking Quicktags: All Links Are Not Created Equal

Okay, next up: the link quicktag. On Needcoffee, we have internal links and external links. Internal links are just plain old links. External links open in a new window. I know that irritates a few people, but I have no idea why. You close the window and you're where you came from. Seems like a no brainer to me.

Anyway. Same deal as before:

1. Go to /wp-includes/js/

2. Edit quicktags.js

3. Look for this code:

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


4. Now this is what creates the buttons across the top of your edit area. In my case, I'm altering one and creating another. So I'm going to do this:

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

edButtons[edButtons.length] =
new edButton('ed_extlink'
,'ext link'
,''
,''
,'x'
); // special case

Now, in the first block of code, all I've done is change that third line, which is what the button is labeled. Because I want to differentiate between the two types of links, I've changed "link" to "int link." And then I've basically copied the same code again, but this time the button's called "ext link." Also, you see the sixth lines–that's supposed to be an access key. I never use this, but I went ahead and put an X for the second one, just in case.

Oh, and I almost forgot: you see where the first button does an "ed_link" thing. Well, since I'm not a real coder, I don't know precisely what the hell that does–it does a call out to a function we'll get to in a minute. So I must made "ed_extlink" the second one.

5. Now look for this section of code, that starts with "function edShowButton". It's that aforementioned function business. As before, I've put in line breaks where there normally aren't any, just to preserve the width of my theme here.

	if (button.id == 'ed_img') {
		document.write('<input type="button" id="' + button.id + '" accesskey="'
+ button.access + '" class="ed_button" onclick="edInsertImage(edCanvas);"
value="' + button.display + '" />');
	}
	else if (button.id == 'ed_link') {
		document.write('<input type="button" id="' + button.id + '"
accesskey="' + button.access + '" class="ed_button"
onclick="edInsertLink(edCanvas, ' + i + ');" value="' + button.display + '" />');
	}
	else {
		document.write('<input type="button" id="' + button.id + '"
accesskey="' + button.access + '" class="ed_button"
onclick="edInsertTag(edCanvas, ' + i + ');" value="' + button.display + '"  />');
	}
}

The first bit, the "ed_link" section, we really don't need to screw with. But we need to add a function bit for "ext_edlink." It's basically the same thing as the one above it, so the two together now look like this:

	else if (button.id == 'ed_link') {
		document.write('<input type="button" id="' + button.id + '"
accesskey="' + button.access + '" class="ed_button"
onclick="edInsertLink(edCanvas, ' + i + ');" value="' + button.display + '" />');
	}
	else if (button.id == 'ed_extlink') {
		document.write('<input type="button" id="' + button.id + '"
accesskey="' + button.access + '" class="ed_button"
onclick="edInsertExtLink(edCanvas, ' + i + ');" value="' + button.display + '" />');
	}

No sweat.

6. Now there's a section marked "function edInsertLink" which we don't need to screw with, because really all we've done for internal links is change the button label. But we need to add a new section. Here's what I've put in directly after the edInsertLink bit:

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

Basically all I've done is copy the code, change "edInsertLink" to "edInsertExtLink" and stick the target="_blank"> in. That line used to look like this:

			edButtons[i].tagStart = '<a href="' + URL + '">';
</a>

But I made it this:

			edButtons[i].tagStart = '<a href="' + URL + '" target="_blank">';
</a>

7. And that's it. You should be good.

Bear in mind I'm a writer, not a coder. So if this screws up your site, it's your own lookout. Backup files before you screw with them. YMMV.

Written by Widge in: Wordpress | Tags: , , , ,

No Comments »

RSS feed for comments on this post. TrackBack URL


Leave a Reply

Widge and a Night of the Living Dead poster from Belgium

This is me.

No, really.

I am a writer, poet, spoken word performer, actor, singer, improviser, content creation and idea machine, freelance iconoclast, and the internet's janitor that dispenses pop culture wisdom to the protagonist of your choice. I have seen too many movies, read too many comic books, and when the zombies finally come, I'm the one you want to call. I sure as hell won't answer the phone, but it's the thought that counts. I advise people on the net, websites and technology, because I know these things instead of having a life or sleeping.

If you like something I've done, donate to the Widge Wants to Kill His Day Job Fund. Or if you'd like to hire me for a job, my rates are terribly reasonable. We thank you.

Powered by WordPress. Theme: TheBuckmaker's Aerodrome.