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.
Thanks for the detailed information on Askimet and for telling...
Dev4Press Updater 1.8.2 released.
We tested both WooCommerce and WPEC. I can't give a...
Comment Link
can i add the rich editor to my tag / category / taxonomy edit page?
Comment Link
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.
Comment Link
you are talking about
remove_filter('pre_term_description','wp_filter_kses');
remove_filter('pre_user_description', 'wp_filter_kses');
?
Comment Link
Yes. That will prevent WP removing HTML from descriptions for terms and users.
Comment Link
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?
Comment Link
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.
Comment Link
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?
Comment Link
I use this in several projects now, and it works just fine.
Comment Link
thanks a lot Millan,
all the best!!!
Comment Link
hi, thanks for this works great! , one question, how to include the font color, font size etc options at the editor?
thanks
Comment Link
It should be there, everything this editor normally has, must be added in custom implementation.
Comment Link
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
Comment Link
The only thing that could happened is that you have styles interfering with the editor and changing text color.
Comment Link
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!!!!!!!
Comment Link
Something else is messing with that, this method works wherever I used it.
Comment Link
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
Comment Link
Sorry – code go stripped out. It’s here:
http://pastie.org/1106191
Comment Link
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.
Comment Link
Sorry, MillaN – should’ve mentioned that I tried that in a number of different ways. For example, this breaks the admin panel:
Comment Link
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);
Comment Link
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);
Comment Link
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!
Comment Link
Thank you for posting this, Im working on the plugin where it adds extra text editor while in page/post edit view. I use content from the extra editor to display it in sidebar for particular post/page depending on id.
Comment Link
Thanks for this tips. I have a question. In one of my project, the client want to post blog from the frontend. Well I managed to did that using a non-standard way by adding another Rich Text Editor (CKEditor). I searched a lot but none of the plugin let me to use it at the front end. Anyway my question is can I use the default WP editor in the front end? Also whats the right way to post blog from the frontend?
Thanks
Comment Link
Hi,
Sorry i have tried your suggestions.. but in my case the TinyMce editor is loaded but not perfectly as it is post pages. I am going to integrate the Editor in a Custom WP Admin Page… where i need the admin to enter “Formatted Content”.
Can you pls help me.
regards,
pranoy
Comment Link
Sorry, there is really nothing more needed. I use this method in several projects and it works in all of them without any problem. You don’t need anything except what is in the tutorial.
Comment Link
Assuming I have several tinymce editors on a custom admin page, how would I be able to get to their content?
(I already tried the
tinyMCE.get(‘first_id’).getContent();
tinyMCE.get(‘second_id’).getContent();
approach but it didn’t work).
Comment Link
I plan adding part of this article next week, and it will include work with multiple editors. I am building a page where I need more than one editor, and I will use that for the article once it’s done.
Comment Link
In the end this code actually works, but for some very strange reason – only when I’m in visual mode and not in html mode.
Have any idea what might cause this?
Comment Link
Please keep this on your calendar. You would be the first that I have seen to document a clear method of doing this.
Comment Link
I really want to see such a tutorial ! I still have conflict with multiple rich editor in the same page… Anything new since November 11 ?
Comment Link
Sorry, I have been very busy, and had no time to get around to that. But, a project I am working on requires 2 editors at once, so hope to have something soon.
Comment Link
Thanks man! Please keep me in touch
Comment Link
I installed the code and it works fine.
Here’s my problem. It looks like when I save the content it doesn’t hold the or tags.
Any ideas?
Comment Link
Sorry, no. I didn’t noticed anything strange with saving.
Comment Link
Hi!
This is brilliant! But I have a problem re the css, mine doesn’t render the same as what is seen on the create page/post. The visual editor is on top and the html version is shown below, unlike on the create post/page where the html is hidden and activated by clicking the tab on top.
How can I render this properly?
Thanks!
Comment Link
Sorry for posting a reply to my own post, I finally made it to look exactly the same. Now I have 2 problems, it strips out also after I click on save, it doesn’t show the words I typed on the visual editor.
Comment Link
It works fine on any panel I have tried it as long as it is on admin side. If it’s not working for you, something is messing with the editor code and styling.
Comment Link
How can I also set the name of the textarea that get’s formed?
Wanting it to be named ‘fs_master[SideText]‘ to go with my settings_fields() array in custom admin panel.
Will name and ID be the same?
-thanks
Comment Link
Name is set same as ID. But problem is that ID with [] characters will not be valid, even that it will still work. It’s too bad that function doesn’t have name parameter also. You can use JavaScript to set any name you want prior to sending.
Comment Link
I’ve got detailed error: switchEditors is not defined
Comment Link
Ok…I’ve fix the problem for switchEditors error.
This worked pretty easily, but another problem I’ve run into is that you can only have one of these on a page, otherwise they conflict with each other. Do you happen to know of a work around for this?
Comment Link
Theoretically you can have 2 of them if both editors are called with different ID parameter, but I haven’t tested that.
Comment Link
very useful.. thanks dude.. !!!
Comment Link
hi. great post. the simplest i’ve found.
but i have a problem with the media-upload buttons.
when i press the image button, the page is reloads and the image up-loader is added at the end of the page, after the footer.
it looks like it doesn’t load with the thickbox, for some reason.
is it just me? what have i done wrong?
thanks,
asaf.
Comment Link
it can be something with the version of WP you are using. Or maybe something is unloading thickbox?
Comment Link
my wp ver. is 3.0.4 and it is a network (multisite). how can i know if something is unloading it?
has anyone else encountered this problem?
Comment Link
I have the exact same issue with 3.0.4 Multisite – media upload generates iframe at the bottom of the page and off the page to the left so that you can only see about half of the content.
Would adding wp_enqueue_script for the thickbox be a solution?
I am using this on my theme options page – prior to upgrading to 3.0.4 all was good (I was using 2.9.2 previously).
Comment Link
Here is the solution:
Add this to the function editor_admin_init
wp_enqueue_script(‘jquery’);
wp_enqueue_script(‘thickbox’);
wp_enqueue_style(‘thickbox’);
Worked like a charm for me.
Pat
Comment Link
Hello
and thank you for your tutorial.
I read the comments and answers but I can not integrate more rich text editor on the same page.
My “id” are different. The display is ok. But the switch works very badly. It switches all rich text editor at the same time.
I tried to edit a script in switchEditors.go Jquery.ready. It does not change much.
Have you any idea?
My apologies for my English may be approximate. Thank you
Comment Link
I am having this same problem on an options page that has multiple tinymce editors for each text area. Any solutions found?
My “id” are different. The display is ok. But the switch works very badly. It switches all rich text editor at the same time.fg
Comment Link
http://farinspace.com/multiple-wordpress-wysiwyg-visual-editors/
This site has a different way of adding the editor which works with more than one pre page.
Comment Link
Awesome tutorial!
worked a treat first time. Thank you very much
Comment Link
Work quite fine but I have 2 issues:
I had to remove wp_enqueue_script(‘post’); to solve te javascript issue:
‘connectWith.constructor’ is empty or no object
In: /wp-admin/load-scripts.php?c=1&load=hoverIntent,common,jquery-color,word-count,suggest,wp-ajax-response,wp-lists,jquery-ui-core,jquery-ui-sortable,postbox,post,thickbox,media-upload&ver=bb947e38ec0edf2c8c56f5b733be86a5
And this could be the reason and tags are not saved when i switch visual/HTML.
Any suggestions how to get these issues resolved.
Comment Link
Use this tutorial instead. Multiple editors on one page works just fine for me.
http://farinspace.com/multiple-wordpress-wysiwyg-visual-editors/
Comment Link
The code for loading scripts has one line missing – `add_thickbox();` which should be placed just before line – `wp_enqueue_script(‘media-upload’);`. Without it the media upload wouldn’t work. I would not recommend using the_editor function with multiple editors on one admin page. The javascript in WordPress core does not handle multiple instances when it comes to switching modes ( Visual / HTML ). It is ok until you switch mode in one of instances ( except first ). Then you cannot get rid of HTML mode’s toolbar when in Visual mode. This problem is documented in trac ticket #11862. I have a solution for multiple instances and you can read it here. It still has some elements missing but it is functional. I’m still working on it and let you know when it is finished.
Comment Link
Just added this to one of my own websites and it works really well – thanks for posting this.
Comment Link
Milane, potrebna mi je pomoc!
Ne znam kako da sacuvam sadrzaj iz editora!
Ja koristim textarea za cuvanje sadrzaja, ali editor je dosta bolji!
Ako mozes da mi se javis na email pa da ti posaljem kôd da pogledas!
Hvala!
Comment Link
Isto kao iz textarea. Editor maskira textarea polje.
Comment Link
Ako mozete da mi pokazete na primjeru?
Ja sam stavio:
Text:
<input type="submit" class="button-primary" value="” />
A kako da sacuvam tekst koji je neko unio i da ga editor kasnije ucita?
Hvala puno!
Comment Link
Kao i sve ostalo u WordPress-u, podaci idu na server gde se obradjuju. Kako to radi zavisi on plugina gde se koristi i kako on radi. Ne mogu da dam univerzalni primer. Ali kao i svako form polje, samo je potrebno ime polja u kodu koji obradjuje podatke.
Comment Link
Napravio sam plugin, ali sam tek sada vidio da ima bug!
http://wordpress.org/extend/plugins/post-it-for-writers/
Evo sta se pojavi kada hoces da editujes sliku:
http://img21.imageshack.us/img21/894/pluginu.png
Ako moze pomoc!
Comment Link
Ovo nema veze sa editorom. Ovo se prikazuje kao nezavisna strana u iframe.
Comment Link
Ne znam kako ali ima veze 100%!
Kad se deaktivira plugin sve se normalizuje!
Comment Link
Ne znam, nisam imao ovakve probleme. Problem je negde u tvom pluginu. Editor kod koristim na mnogo mesta i radi kako treba.
Comment Link
Please troubleshoot in english.
Comment Link
Really important and informative post. It saved a lot of time for me as I was developing something where it was necessary to use it.
Thanks a lot Millan
Happy coding…….
Rohan
Comment Link
Finally found something that works! I’ve tried everything to get a WYSIWYG editor for my front end to work. My problem is that I’m using it in the front end so the Stylesheets are missing. Any way to stick this in the function somehow? Thanks!
Comment Link
That is the problem, since stylesheets used on the admin side are not easy to reuse on front end and not make a mess. Until WP editor is rewritten to allow for reuse and embedding, this process will never be easy.
Comment Link
A good tutorial. I have inserted your code into my WordPress plugin . When I want to set content then I write following
tinyMCE.activeEditor.setContent(‘some html’);
But the content is not inserted. Can you help me, pls ?
Comment Link
I am not sure about how to use TinyMCE, but your example here is not looking right. What content to add? From where? This looks like file name, but it is not specifying where the file is. Try TinyMCE forums.
Comment Link
thanks its work perfect
no dobut nice effort for post this article because its save my time thanks again
Comment Link
hi i’m currently writing a wp plugin and stumbled upon your post about using wordpress tinyMCE in your own plugin. I was also wondering if it’s possible to use wordpress tinymce in a non admin page?
Wp tinymce perfectly on any admin page although I can not get it to work correctly on a non admin page it looks like im missing some extra js scripts and css files.
Do you have any idea, how to include tinyMCE on wordpress pages (ie non admin pages)
cheers
Comment Link
Old embed system is very hard to make work in the frontend, outside of admin side. But, with WP 3.3, new wp_editor() works anywhere. You can check another post for it: http://www.dev4press.com/2011/tutorials/wordpress/tips/add-rich-text-editors-the-right-way/
Comment Link
Hello, Thanks for provide the easy way to add editor in Custom plugin. But We have some error to upload Image, Audio, video.
As we click to media upload at the top left, it is not pop up on the same page,redirected on another window.
Please help me how can i fix this .
Comment Link
Most likely, you have some JavaScript errors on page preventing editor JS to run.