Adding rich text editor, like the one used for the post editor, was a really big problem in WordPress. And while there were some ways to do it, it was never working as you would expect it, there were too many issues and conflicts. But, with WordPress 3.3, all that changes.
Two editors on the same screen
In my earlier article on the subject (Add rich text editor to your plugin), I have described a method on how to add single, fully working rich text editor to any plugin. And, for that specific purpose, that method was working great. But, if you needed 2 editors on the same page, or if you needed to add editor in the meta box on the post editor page, it wasn’t working. There are other methods on the internet to do this, but none of the is actually fully working: all involve some hacking, and all were messy to use.
Now, in WordPress 3.3 there is a new way of doing this. Whole editor code is updated to allow more than one editor instance on any admin screen (still haven’t had a chance to see how to make this work on the front end), including post editor page. And, all that is needed is one single function:
wp_editor($content, $editor_id, $settings = array());
First value is actual content you want to display in editor when it is displayed. Second one is very important, and this needs to be unique since it is used as an ID for the editor control. Last value can be skipped, but it can be used to add more settings to the editor. There are many settings you can add with the last parameter, and some of them are not working now (WP 3.3 Beta 1). Here are some of the settings you will need and use:
- wpautop: enable the default WordPress content formatting, active by default.
- media_buttons: show or hide upload insert button, active by default.
- textarea_name: name for the editor element. By default it is same as $editor_id you pass to the function. This is name used to identify the editor in the $_POST for saving purpose.
- textarea_rows: number of rows, size of the editor.
- editor_class: extra CSS class to add to the editor.
All the other settings can be found in WP_Editor class, for editor method. So typical example of how to use this would be:
$args = array("textarea_rows" => 5, "textarea_name" => "editor_content_1", "editor_class" => "my_editor_custom");
wp_editor("My editor content", "my_editor_1", $args);
And that is all you need. You can play with settings to see how this works. New editor model is done really well, and so far in the current Beta works pretty much as expected. There will be some changes until final 3.3 is released, so check this post out for all the changes in the editor implementation.
Yes, please tell us.Waiting for some time now.
Is there a...
will a stable version 2.0 ever be published? really appreciate...
Great article and one of best tutorials I have read...
would version 2 support using a CDN for say the...
Comment Link
I think you are missing a quote in your code “example” but otherwise this is a great tip … just have to think where I might want to apply it.
Comment Link
Thanks, I have fixed that.
Comment Link
Here’s a bugger one to figure out when using wp_editor.
Using the editor on bbPress, and it works perfectly when creating new topics, however when creating a ‘reply’ to a topic, the html editor looses its buttons.
example reply: (click html not working)
http://www.bbconverter.com/forums/topic/welcome-to-bbconverter/
example new topic: (html works)
http://www.bbconverter.com/forums/forum/announcements/
The code used to call the editor is identical, so it’s very strange.
*there are a few other annoyances, but overall it works pretty well for a beta
Comment Link
On the page where HTML is not working you have several JavaScript errors, so that’s the problem. Fix them, and it will work. Use Firebug to see the errors.
Comment Link
thnx MillaN
Yeah, those 2 js errors are on known by JJ and are on the trac. Something with 3.3 doesn’t like bbpress much yet, will track it down.
Comment Link
My firebug is no longer showing me any js errors on the page I linked above but I still don’t see the buttons in html mode.
Are you able to see something that I am missing?
I’m so close to getting this all sorted out
Comment Link
Sorry, until WP is sorted out and final 3.3 is released, I am not sure that it can be fixed.
Comment Link
thanks for taking a peek. Was driving me nuts in that it works perfectly on local dev box but not this site. Still pretty cool function though.. 3.3 is gonna be awesome.
Comment Link
I will be doing some WP 3.3 experiments later this week, and I will have more info if this can be solved soon.
Comment Link
thanks Millan wp 3.3 now makes it so simple with to include the tinymce on frontend pages. Here is another related post outlining some more options for wp_editor()
http://soderlind.no/archives/2011/09/25/front-end-editor-in-wordpress-3-3/
Comment Link
Thanks for the link.
Comment Link
wow tnx, im just beginning with wp and theme options, and this way is so easy.
but when i save the data, the quotes are escaped, and when i show data i see the escapes \” , even in the same editor. after looking for a solution for a while, i decided to go with the easy way (on the admin options page and frond-end ):
str_replace ( ‘\”‘, ‘”‘, get_option(” my_option”) );
now all works fine O_o’
Comment Link
How would you add this to a Gravity Forms textarea?
Comment Link
Right now I am don’t think you can. Gravity Forms needs to change the way they render textarea to use new editor function. Until that happens, new API can’t help you.
Comment Link
Great function that I have missed. I cannot figure out how would I add this to let’s say pages.
Does it have to be wrapped in a function or something (that will call it below the default editor)?
Comment Link
Hi Millan,
thank you this good article. I don’t know if you can help me…I’m using the CKEditor as default editor and I want to integrate the tinyMCE editor faor a plugin…this is my code:
function tiny_page() {
add_options_page(‘tiny’, ‘tiny’, ‘manage_options’, __FILE__, ‘tiny_form’);
}
add_action(‘admin_menu’, ‘tiny_page’);
/* load the tiny editor*/
function editor_admin_init() {
wp_enqueue_script(‘word-count’);
wp_enqueue_script(‘post’);
wp_enqueue_script(‘editor’);
wp_enqueue_script(‘media-upload’);
}
function editor_admin_head() {
wp_tiny_mce();
}
add_action(‘admin_init’, ‘editor_admin_init’);
add_action(‘admin_head’, ‘editor_admin_head’);
/* output the plugin page*/
function tiny_form() {
$args = array(“textarea_rows” => 5, “textarea_name” => “editor_content_1″);
wp_editor(“My editor content”, “my_editor_1″, $args);
}
but the problem is that the output plugin editor is the CKEditor and not the tinyMCE…
any idea?!
thanks
Comment Link
Sorry, I never used CKEditor in WP, and I have no idea what it does.
Comment Link
ok but it is possible to have another default editor than the tinymce and load the tiny one in a plugin without conflict ?
Comment Link
I have no idea. WP is made to use TinyMCE and replacing it is not easy. Whatever plugin you used to replace it with CKEditor most likely needs to change to many things for both editors to work.