Editor Example
Sometimes is very useful to be able and use existing WordPress rich editor within your plugins. TinyMCE editor built in WP can be easily reused and you can even set some elements. Following example will work in WordPress 2.8 and newer including latest WP 3.0.
There are two parts to this procedure. One is to load needed JS and CSS files, and other to call the editor where you want it displayed.
Loading Editor
To load TinyMCE you need to use the following code. First two lines attach hooks to init and head actions. Two functions hooked follow after. One loads JavaScript needed, and second actually loads the editor. Line that enqueues the media upload element is needed only if you use media buttons.
<?php
add_action('admin_init', 'editor_admin_init');
add_action('admin_head', 'editor_admin_head');
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();
}
?>
Display editor
Editor is displayed using one function. This function is defined as follows:
the_editor($content, $id = ‘content’, $prev_id = ‘title’, $media_buttons = true, $tab_index = 2)
First parameter, $content will be displayed inside the editor. Next is $id, and the textarea element created will have that ID. You can use it to get the content from the editor. Next parameter can be used the specify previous element in the form for tab moving (last parameter). And, $media_buttons allow you to display or hide media upload buttons above the editor.
Here is an example:
<div id="poststuff">
<?php
the_editor("", "content", "", true);
?>
</div>
This you need to add on your panel where you want editor displayed. It will fit into any DIV you want so that you can limit the size and dimenzions. Using “poststuff” DIV is important so that all elements are styled properly.
Content of the editor is available as part of the form on submit named as content, or whatever you set as ID in the code above. If you want to access to content from JavaScript use this:
tinyMCE.activeEditor.getContent();
That’s all you need to know (for now), you can use anything tinyMCE object offers from JavaScript. If you need more help, leave a comment.
Tags: buttons, css files, div, editor php, elements, example, hooks, init, javascript, language php, parameter content, php editor, Plugins, rich text editor, tab index, textarea element, tinymce
can i add the rich editor to my tag / category / taxonomy edit page?
If you talk about WP taxonomies edit page, you can’t. These are controlled by WordPress, and simple textarea is hardcoded. But, since TinyMCE3 is a JavaScript converting textarea to rich editor, you can always load everything needed to these pages and than use JavaScript to modify the textarea. To save edited descriptions (WP by default strips HTML from them), I added to GD Press Tools options to disable HTML stripping.
you are talking about
remove_filter('pre_term_description','wp_filter_kses');
remove_filter('pre_user_description', 'wp_filter_kses');
?
Yes. That will prevent WP removing HTML from descriptions for terms and users.
OK, but is there a way to add the rich editor to this textarea?
Can we use some filter or action to add your code to term_description and user_description?
As I said, only way is to use JavaScript and native TinyMCE functions to transform textarea in question into the editor. I will surely research this when I get more time so I will publish another tip when I can.
hi,
very good info, thanks a lot for sharing this one,
i try to add this to my theme options page, i add it but i can’t save the content for some reason.
can this be done?
I use this in several projects now, and it works just fine.
thanks a lot Millan,
all the best!!!
hi, thanks for this works great! , one question, how to include the font color, font size etc options at the editor?
thanks
It should be there, everything this editor normally has, must be added in custom implementation.
Really good article. I was searching for it on the net.
I got a little problem with it, my text editor is displaying the content in white color…..
….. don’t know whats wrong with it…. well, being a developer, I need to look into this matter myself…..
Happy coding guys….
Rohan
The only thing that could happened is that you have styles interfering with the editor and changing text color.
hey, i sorted out color issue through admin’s css file, it was mentioned as WHITE there……. but there is one more issue, it’s not changing visual styles and showing some javascript related errors…… like from html view to visual view etc……..have also tried by adding some script files to my plugin errors gone but style doesn’t work properly…….have to fight more….
happy coding!!!!!!!
Something else is messing with that, this method works wherever I used it.
This is mind bogglingly brilliant. I’ve been looking for some help on this for awhile. I’m setting up an admin panel but I can’t seem to get the content to show when I reopen the Control Panel.
Here’s my code:
<label for="”>
My original code had this to pull the content of the textarea back:
<textarea name="” type=”" cols=”" rows=”">
Again — thanks for this great post. Hope these code snippets make sense. I’m no PHP genius
Sorry – code go stripped out. It’s here:
http://pastie.org/1106191
Code you want to show must be added through the_editor() function call as a first parameter. If you leave it empty, it will remove content from textarea once it’s converted to editor.
Sorry, MillaN – should’ve mentioned that I tried that in a number of different ways. For example, this breaks the admin panel:
Damn square brackets got me again. This breaks the panel:
the_editor( if ( get_settings( $value['id'] ) != “”) { echo stripslashes(get_settings( $value['id']) ); } else { echo $value['std']; }
, $value['id']
, “”
, false);
You can’t use IF or ECHO in the function call. This should be:
the_editor((get_settings($value['id']) != “” ? stripslashes(get_settings($value['id'])) : $value['std']), $value['id'], “”, false);
That works perfectly. I had figured out that the IF and ECHO in the function call were the problem and I had a longer version of PHP – but yours is short and elegant.
Thanks so much for taking the time — much appreciated!