Allground - Responsive Fullscreen Backgrounds for WordPress with images, YouTube videos, Google Maps and self hosted videos

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:

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
	));

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:

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

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.

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
}

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:

<div id="editor-toolbar">
	<a id="edButtonHTML">Rich Formatting</a>
	<a id="edButtonPreview" class="active">HTML</a>
</div>
<div id="editorcontainer">
...

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:

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'];
}

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.


“How to add TinyMCE to textarea meta boxes in WordPress” received 9 comments! Add yours.

  1. Hernando July 1st, 2011

    Obrigado pelo plugin! very useful

  2. Kat July 2nd, 2011

    Thanks for the tutorial. I’ve been looking for a way to use the editor in my code.
    Got to thank you also for Pay with a Tweet, didn’t knew about it and it’s a nice way to spread the word! Now I’ve to show it to my clients!

  3. Jiggins July 12th, 2011

    Downloaded the plugin, but it made little sense to me.

    All I’m looking to do is add a secondary TinyMCE area when editing Pages. I’ve scoured the web and your solution is certainly the closest I’ve seen, but can’t for the life of me figure out how to implement it!

    Was hoping just to be editing functions.php (where I’m most comfortable).

  4. How to add TinyMCE to textarea meta boxes in WordPress | WPsharing July 13th, 2011

    [...] Source: http://www.ilovecolors.com.ar/tinymce-plugin-textarea-metaboxes-wordpress/ Posted in WordPress Tutorials | Tags: meta boxes · textarea · TinyMCE · tutorial · wordpress Share with: ← 14 Javascript Resources And Plugins For Creating A Stylish Chart You can leave a response, or trackback from your own site. [...]

  5. Zach July 24th, 2011

    Great article and nice site. This comment form caught my eye and made me want to comment!

  6. Informationen zu Olivenöl September 3rd, 2011

    Weekly Post…

    [...]if you want to study a little a lot more then I recommend the following[...]…

  7. keitai June 29th, 2012

    Hi,

    I am trying to use your code to add an extra richtext input field. But the tabs don’t work.

    Btw a very simple solution to just add tinymce is to add just class=”theEditor” to your textfield and tiny mce is being displayed

    regards

  8. Elio June 29th, 2012

    Since WP 3.3, the best way is to use the wp_editor function.

  9. keitai July 6th, 2012

    @Elio, i am aware but i am stuck to WP 3.1.4

Leave a comment