Add “code” button to wordpress tinyMCE

Question

I\'ve been following this tutorial, and many like it: http://codex.wordpress.org/TinyMCE_Custom_Buttons

function myplugin_addbuttons() {
   // Don\'t bother          


        

Answer 1

Just stumbled over the http://wordpress.org/plugins/tinymce-code-element/ WordPress plugin, which does the job.

Answer 2

If you have access to add settings to the TinyMCE config (which I'm not sure you do based on your previous comments) then you could add the following.

style_formats : [{title : 'Code', inline : 'code'}]

What this will do is add a "code" item in the Style drop down that will wrap the selected text in the code tags.

If you can't get to the config to add this, then you may need to develop a TinyMCE plugin that registers that format programmatically. BTW, the link to how to develop a TinyMCE plugin on the WordPress article you reference is no longer right. Check out the How-to article instead.

Finally, if all else fails, you could develop a plugin that wraps the selected text (ed.selection.getContent()) in the code and returns it using ed.selection.setContent()

Answer 3

I've written a plugin that does exactly that, i.e. it provides a button named 'codeElement' which users can use to wrap text in a code element or tag.

• TinyMCE Plugin page on Sourceforge
• direct download