If you read my other post about WordPress Meta Boxes you know I was adding multiple ones to my custom post_type edit page.  Well, I also wanted users to be able to use the TinyMCE Rich Text Editor in those boxes if they wanted, and (just like the regular compose box) be able to toggle to the HTML source code view (aka the way a Meta Box textarea usually looks).

I found a couple of posts (post 1, post2) that sent me about 90% in the right direction, the first told me how to add TinyMCE to the meta boxes, the second showed me how to add the mode switches, but I absolutely could not get the jQuery events to attach to the “Visual” and “HTML” tabs, no matter how low I placed the script in the page or if I used the recommended jQuery “ready” function.  Thankfully, it turns out jQuery is not needed for this to work.

First things first, I added this code, which places the tabs above and wraps my textarea in a named DIV:

1
2
3
4
5
6
<div class="editor-toolbar">
<a id="edButtonPreview1" class="edButtonPreview" onclick="toggleEditor(1,'html');" >HTML</a>
<a id="edButtonHTML1" class="edButtonHTML active" onclick="toggleEditor(1,'visual');">Visual</a>
</div>
<div class="customEditor">
<textarea name="my_meta_box" cols="40" rows="5"><?php echo $my_meta_data; ?></textarea></div>

Yeah, yeah I know I’m using dreaded evil inline javascript, but it solved my problem with jQuery missing the opportunity to attach event listeners.  For each Meta Box I’d just advance the number from 1 to 2, 3, 4, etc. (note that we do not start with zero – the zero TinyMCE editor is the regular one).

The jQuery stuff did work for adding the TinyMCE controls to the Meta Box text areas.  Then I just added a regular ol’ Javascript function for swapping the tabs and turning the rich text editor on and off.  This goes in the footer of the page because it MUST come after TinyMCE has initialized, and the priority of “99” helps do that:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<?php
add_action('admin_print_footer_scripts','my_admin_print_footer_scripts',99);
function my_admin_print_footer_scripts()
{?>
<script type="text/javascript">/* <![CDATA[ */
// This part uses jQuery to add TinyMCE to each Meta Box textarea //
jQuery(function($) {

var i=1;
$('.customEditor textarea').each(function(e) {
var id = $(this).attr('id');
if (!id){
id = 'customEditor-' + i++;
$(this).attr('id',id);
}
tinyMCE.execCommand('mceAddControl', false, id);
});
});

// This part lets users toggle between modes //
function toggleEditor(id, dir) {
var id = 'customEditor-'+id;
if (dir=="visual") {
var cmd = 'mceAddControl';
var cName1 = " active";
var cName2 = "";
} else {
var cmd = 'mceRemoveControl';
var cName1 = "";
var cName2 = " active";
}
tinyMCE.execCommand(cmd, false, id);
document.getElementById('edButtonPreview').className="edButtonPreview"+cName1;
document.getElementById('edButtonHTML').className="edButtonHTML"+cName2;
}
/* ]]> */</script><?php
} ?>

By now you’ll see they are functional, but they look awful!  We need to add a little CSS to the head of our admin page to fix it:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<?php
add_action('admin_head', 'my_editor_styles');
function my_editor_styles() {
?>
<style type='text/css'>
#poststuff .editor-toolbar {
height: 30px;
}
#poststuff .edButtonPreview, #poststuff .edButtonHTML {
background-color: #F1F1F1;
border-color: #DFDFDF #DFDFDF #CCC;
color: #999;
}
.edButtonPreview, .edButtonHTML {
height: 18px;
margin: 5px 5px 0 0;
padding: 4px 5px 2px;
float: right;
cursor: pointer;
border-width: 1px;
border-style: solid;
-moz-border-radius: 3px 3px 0 0;
-webkit-border-top-right-radius: 3px;
-webkit-border-top-left-radius: 3px;
-khtml-border-top-right-radius: 3px;
-khtml-border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-top-left-radius: 3px;
}
#poststuff .editor-toolbar .active {
border-color: #CCC #CCC #E9E9E9;
background-color: #E9E9E9;
color: #333;
}
.customEditor {
margin:0 0 25px 0;
border:1px solid #ccc;
background:#fff;
}
.customEditor textarea {
margin:0;
border:0;
width:100%;
background:#fff;
}

</style>
<?php } ?>

And there it is!  Multiple instances of TinyMCE on multiple Meta Boxes, with tabs above each so users can toggle between “Visual” and “HTML” modes just like they are used to doing.