TinyMCE in WordPress Plugins

Jan 04, 2010

60

Unlike some of the other JavaScript assets available to plugin developers through wp_enqueue_script(), getting TinyMCE to function in your plugin is a little different. You would perhaps expect to use it like this:

<?php
add_action("admin_print_scripts", "js_libs");

function js_libs() {
     wp_enqueue_script('tiny_mce');
}
?>

<script type="text/javascript">

	tinyMCE.init({
		mode : "exact",
		elements: "a_nice_textarea",
		theme : "simple"
	});

</script>

<textarea id="a_nice_textarea" name="a_nice_textarea"></textarea>

However, enqueuing the TinyMCE really won’t get you any results. You need to use the wp_tiny_mce() function, which is not well documented. Essentially, the function pre-constructs the TinyMCE for you, and you override its default options. The main option to override is editor_selector which points TinyMCE at a specific textarea class.

<?php
wp_tiny_mce( false , // true makes the editor "teeny"
	array(
		"editor_selector" => "a_nice_textarea"
	)
);
?>

<textarea class="a_nice_textarea" id="a_nice_textarea" name="a_nice_textarea"></textarea>

You can stick this anywhere you want, and it will work (for the most part). All the available configuration options for TinyMCE can be determined by referencing it within the array. WordPress has a bunch of them determined by default for the post content editor; most of them are fine as is.

// TinyMCE init settings
$initArray = array (
	'mode' => 'none',
	'onpageload' => 'switchEditors.edInit',
	'width' => '100%',
	'theme' => 'advanced',
	'skin' => 'wp_theme',
	'theme_advanced_buttons1' => "$mce_buttons",
	'theme_advanced_buttons2' => "$mce_buttons_2",
	'theme_advanced_buttons3' => "$mce_buttons_3",
	'theme_advanced_buttons4' => "$mce_buttons_4",
	'language' => "$mce_locale",
	'spellchecker_languages' => "$mce_spellchecker_languages",
	'theme_advanced_toolbar_location' => 'top',
	'theme_advanced_toolbar_align' => 'left',
	'theme_advanced_statusbar_location' => 'bottom',
	'theme_advanced_resizing' => true,
	'theme_advanced_resize_horizontal' => false,
	'dialog_type' => 'modal',
	'relative_urls' => false,
	'remove_script_host' => false,
	'convert_urls' => false,
	'apply_source_formatting' => false,
	'remove_linebreaks' => true,
	'paste_convert_middot_lists' => true,
	'paste_remove_spans' => true,
	'paste_remove_styles' => true,
	'gecko_spellcheck' => true,
	'entities' => '38,amp,60,lt,62,gt',
	'accessibility_focus' => true,
	'tab_focus' => ':prev,:next',
	'content_css' => "$mce_css",
	'save_callback' => 'switchEditors.saveCallback',
	'wpeditimage_disable_captions' => $no_captions,
	'plugins' => "$plugins"
);

For a closer look at wp_tiny_mce(), check out the source.

For incorporating the Visual/HTML mode switcher, and turning TinyMCE on and off, see Switching Visual/HTML Modes With TinyMCE.

Safsdf

yeah! you rock!)
Hacker1cagain

Excellent info... Thanks..
Ivan

Hm... there is more clear and working better solution:
http://blog.imwd8solutions.com/wordpress/wordpress-plugin-development-add-editor-to-plugin-admin-page/
Including editor for a few minutes without javascript problems
Come' on

"Please note that if you change default id/name “content” to another – no guaranty of stable work."
Paul

Thanks Kyle - very informative. It looks as though wp_tiny_mce isn't available outside of the admin environment? - can you suggest a way to use the TinyMCE editor functionality outside of the admin/plugin environment? I'd like to use it on a page, where the user is logged in, but it's basically a page - kind of like using it in the comments box.. thanks if you get chance to help with this. Paul.
keighl

hey paul. if you want to use tinymce on the public side, just go about busy as usual by including the tinymce package you can download. no need to use the hooks.
Tom

I had the same problem, add plugins to your declaration:
"content1_content",
'plugins' => $plugins
)
);
?>
Tom

would anyone know why the tinyMCE window is not closing and opening new p tags when a user hits enter in the tinyMCE window?

Here is my code, taken from this post:
wp_tiny_mce( true,
array(
"editor_selector" => "content1_content",
)
);
?>
<textarea class="content1_content" id="content1_content" name="content1_content"><?php echo $content; ?></textarea>

The point is to add rich text formatting to custom meta fields. I can bold and do list items just fine, but returns aren't working. It all looks normal during editing but once the post is updated all the text is merged to be on a single line.
keighl

Hey, tom. It's likely an issue with how you are saving the textarea. Are you using wpautop()?
sethshoultes

I have a plugin I am building and I am trying to add two instances of the_editor on the same page. The first instance of the_editor is for the description of an event, the second instance would be for a custom notification email that is sent out when someone registers for the event. I have two instances, but the second on adds an additional tool bar and the tabs do not work correctly.

Here is a screenshot:
http://prntscr.com/dh0q

Seth
keighl

Setting up two the_editors is not going to work. Having two tinymce implementations with the same name/id are going to conflict. Do you really need all that stuff for the email like uploads and iframes? You could just setup up another textarea and make in rich-editable like I've described in the article.
sethshoultes

No I guess I don't really need all of the other stuff. I kinda though it would be cool to allow the admin to upload images that could be included in the email.

I did try your suggestion above and it works great. Just need to get the tabs working now. :)

Thanks for the great post! Very helpful.

Seth
sethshoultes

Any ideas on how to have two instances of the_editor on the same page?
keighl

I'm not sure ... why do you need two of them? On the edit page?
sethshoultes

Oops. Didn't see this reply on the page for some reason. I posted my reply above.
Mike

This solution works but I haven't the media buttons which would be nice, "the_editor()" function in 'general-template.php' presents everything nicely but the switch buttons don't highlight correctly and the HTML tags are made into > < entities switching.

Do you know how to get the media buttons added to your solution to outdo the wp function that is supposed to to it?
Jim

The editor doesn't seem to load after posting the form back to save the data (not using ajax save). Any ideas? Refreshing the page loads the editor again.
keighl

hey, jim. what context are you using it in? options page? widget? post?
Kim

You guys should check out the TinyMCE forum post which states you should use a triggersave() callback to set the value of the iFramed (yes...) wysiwyg editor to the original Textarea. Otherwise your original textarea remains empty when you Ajax-Post your form ;-) because of the fact that tinymce launches the value-copy only on the submit event.

<script type="text/javascript">

</script>

Greets!
keighl

Thanks for the tip, Kim! Have you got a link to that post?

blog comments powered by Disqus