How to add TinyMCE to textarea meta boxes in WordPress

Maybe one of the key factors in WordPress wild adoption, was the fact of the inclusion of TinyMCE, the rich text editor, for less tech-savvy users. Even ExpressionEngine, a paid CMS, doesn’t include a rich text editor out-of-the-box. Moreover, you can add TinyMCE for your textareas in plugins or theme settings pages!
In this tutorial you will learn how to add TinyMCE to textareas in your settings pages for your plugins or themes. You will also get a plugin ready for WordPress 3.2 that demonstrates this.

Overview

Your users or clients will find much easier to edit text using TinyMCE, particularly for cases like an introduction text block or an aside included in a product page with additional information about it, just to name a couple of examples. The code we will be writing here works in the same way for a plugin or a WordPress theme, so you can port it to your theme if you need to do so.
WordPress introduced a function in version 2.7 to output the TinyMCE editor wherever you want. The function has been augmented through the years to support new additions, like the new link panel in WP 3.1 or the upcoming distraction free mode in WP 3.2.

In addition, you will add a couple of buttons to switch to raw HTML mode, but these are independent and have nothing to do with the rich text editor. So, without further ado, let’s begin coding our plugin.

Displaying TinyMCE in the textarea

First, you must add the following PHP code snippet within the scope of the textarea where you want to render the rich text editor:

[php]
if (function_exists(‘wp_tiny_mce’))
wp_tiny_mce(false, array(
‘mode’ => ‘exact’,
‘elements’ => ‘tw’,
‘height’ => 200,
‘plugins’ => ‘inlinepopups,wpdialogs,wplink,media,wpeditimage,wpgallery,paste,tabfocus’,
‘forced_root_block’ => false,
‘force_br_newlines’ => true,
‘force_p_newlines’ => false,
‘convert_newlines_to_brs’ => true
));
[/php]

Notice the plugins parameter? this is where you can add all the cool TinyMCE plugins created by the WordPress team to enhance the user experience.  For example, wplink is the new link panel introduced in WP 3.1 and in order for it to work you must also add wpdialogs plugin.
Let’s create the textarea now. Your editor placeholder and textarea could have the following structure:

[html]
<div id="editorcontainer">
<textarea id="tw" name="tw" cols="60" rows="5" style="width: 100%; height: 200px"><?php echo $value[‘tw’]; ?></textarea>
</div>
[/html]

That’s all you need to add the TinyMCE editor to our textareas. Now, let’s add the HTML/Rich Text Editing switches.

Switching between HTML and Rich Text Editing

We need to add a script and, just to make it look exactly like the editor shown in post or pages, a pair of style rules. You can output these in the admin header.

[php]
add_action(‘admin_head’, ‘ilc_add_tinymce’);
function ilc_add_tinymce() {
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
id = ‘tw’;
jQuery(‘#edButtonPreview’).click(
function() {
tinyMCE.execCommand(‘mceAddControl’, false, id);
jQuery(‘#edButtonPreview’).addClass(‘active’);
jQuery(‘#edButtonHTML’).removeClass(‘active’);
}
);
jQuery(‘#edButtonHTML’).click(
function() {
tinyMCE.execCommand(‘mceRemoveControl’, false, id);
jQuery(‘#edButtonPreview’).removeClass(‘active’);
jQuery(‘#edButtonHTML’).addClass(‘active’);
}
);
});
</script>
<style type=’text/css’>
#tw{ margin: 0}
.mceLayout{
border: 1px solid #ccc;
}
</style>
<?php
}
[/php]

You have created a couple of commands to add and remove the TinyMCE editor. These will be triggered by links. Let’s add them right before our editor container:

[html]
<div id="editor-toolbar">
<a id="edButtonHTML">Rich Formatting</a>
<a id="edButtonPreview" class="active">HTML</a>
</div>
<div id="editorcontainer">
…
[/html]

Displaying the rich text

To test our code, we’re going to add the content of the textarea at the end of the post content:

[php]
add_filter(‘the_content’, ‘ilc_the_content’);

function ilc_the_content($content){
$ilc_settings = get_option(‘stored_ilc_tinymce_metaboxes’);
return $content . $ilc_settings[‘tw’];
}
[/php]

Download the sample plugin

The rest of the code are the usual routines to save and retrieve the stored values. You can download the sample plugin below clicking in the button to tweet this post and your download will start afterwards.