Ken Mitchell

Introduction

Wordpress uses two styles of editors. At least in version 2.2 (feel free to fill me in on other version). The “Visual” tab is an implementation of TinyMCE, and the “Code” tab is more of a raw editor. The access keys associated with each of these can be customized in the file pertaining to each of those.

“Visual” tab shortcuts

Taking a look at the /wp-includes/js/tinymce/plugins/wordpress/editor_plugin.js file yields lines for each of the tags:

+ '<input accesskey="n" onclick="tinyMCE.execInstanceCommand('{$editor_id}','mceSpellCheck',false);" type="button" />'
+ '<input accesskey="k" onclick="tinyMCE.execInstanceCommand('{$editor_id}','Strikethrough',false);" type="button" />'
...

Note: This is not all of the access keys for TinyMCE. Some of them are handled quite differently and are scattered out through some other files.

You see above the Spellcheck and the Strikethrough buttons for the toolbar. The access keys are “n” and “k” respectively. You can obviously change that to your preference, by changing the value of the accesskey attribute. The list goes on. Here are the shortcuts that were in my file by default.

Note: This of course is in addition to the modifier keys. Mine is Alt+Shift on Firefox2. You may use only Alt or Ctrl for yours. Try them until you find it.

• SpellCheck - “n”
• Strikethrough - “k”
• Unordered List - “l”
• Ordered List - “o”
• Outdent - “w”
• Indent - “q”
• Justify Left - “f”
• Justify Center - “c”
• Justify Right - “r”
• Justify Full - “j”
• Link - “a”
• Unlink - “s”
• Image - “m”
• More - “t”
• Page - “g”
• Undo - “u”
• Redo - “y”
• Help - “h”
• Bold - “b”
• Advanced Menu - “v”

“Code” tab shortcuts

The “Code” tab uses a different plugin and different set of access keys. They are defined in the /wp-includes/js/quicktags.js file. It looks like this:

edButtons[edButtons.length] =new edButton('ed_strong','b'
,'<strong>'
,'</strong>'
,'b'
);

edButtons[edButtons.length] =
new edButton('ed_em'
,'i'
,'<em>'
,'</em>'
,'i'
);
...

Above are the bold and italics buttons. You can see that the access keys are “b” and “i” respectively. Again, you can change that to your preference. Here are the defaults:

• Bold - “b”
• Italics - “i”
• Link - “a”
• Block or b-quote - “q”
• del - “d”
• ins - “s”
• Image - “m”
• ul - “u”
• ol - “o”
• li - “l”
• code - “c”
• more - “t”
• page - “p”

You could also add your own functions to either of these, but for the “Visual” tab, it would take a little more advanced coding (I might cover this later if there is interest). For the “Code” tab, it’s simply. Here is a button to tag as <pre>:

edButtons[edButtons.length] =new edButton('ed_pre','pre'
,'<pre>'
,'</pre>'
,'p'
);

Now the “p” access key may conflict with another button, but you get the point.

This entry was posted on Wednesday, September 5th, 2007 at 8:57 am and is filed under HowTo, Wordpress.You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.