Customizing Your WYSIWYG Editor Buttons in Wordpress

Customizing Your WYSIWYG Editor Buttons in Wordpress

December 06, 2007 ( 5 )

wysiwygWPCandy.com gave a nice tutorial this week on how to add and edit the behaviors of WYSIWYG buttons in Wordpress. This inspired me to make three additional hacks of my own:

Adding ‘target=blank’ to all outgoing links

Whenever I’m linking something in a blog post, I use the target attribute to open it in a new window. Like with all three examples, you’ll need to first open /wp-includes/js/quicktags.js. Scroll to line 371 and change this…

edButtons[i].tagStart = ‘<a href="’ + URL + ‘">’;

…to this…

edButtons[i].tagStart = ‘<a href="’ + URL + ‘" target="blank">’;
Making image paths absolute

One main reason I like to keep my image paths absolute is so they show up for people using feedreaders. Currently Wordpress makes you type the entire URI, but this can be remedied by changing line 381 from this…

var myValue = prompt('Enter the URL of the image', 'http://');

…to this…

var myValue = prompt('Enter the URL of the image', 'http://www.mysite.com/images/');
Adding CSS classes to images

I apply a CSS class to nearly every image in my blog so that it’s got the proper border and margins. If you want to be prompted for class name each time, scroll to the end of line 385, make a new line, and paste this:

+ '" class="' + prompt('Enter a CSS class', '')

Popularity: 1% [?]

5 Responses
  1. Yea, saw WPcandy’s post yesterday, interesting to ack the codes a little can bring so much difference, love that “target_blank” tip.

    Cheers.

  2. Satollo said:

    To add the target “blank” to all outgoing link, you can use this my plugin: http://www.satollo.com/wordpress-plugins/target-blank/.
    This plugin add a small javascript code in the blog footer which add the target “blank” to all link outside the blog.

    Bye!

  3. Jerry said:

    I found another usefull plugin regarding this. With this plugin you can just add buttons to the editor. It’s not my plugin, it’s called “WP-AddQuicktag (en)” and you can find it here : http://mikebrowne.com/wp/

    Maybe someone has some use for it.

  4. Jerry said:

    Oh, just found something Darren, when you click on the commenters name link in your comments, the link still opens in the current window, not in a new one. Maybe something you want to change ?

Trackbacks
  1. Buffer Dump 19DEC07 « Feet up, eyes closed, head back:

    [...] “Customizing Your WYSIWYG Editor Buttons in Wordpress“, which points to this lovely tutorial at WPCandy: “Tutorial: Adding Buttons To The Post Editor“ [...]

Leave a Reply