WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I've used this method to enter the first editor:

on functions.php:

function add_admin_theme_styles() {
    add_action('admin_print_styles', 'add_admin_theme_styles');

function fb_change_mce_buttons( $initArray ) {

        $initArray['theme_advanced_blockformats'] = 'p,address,pre,code,h3,h4,h5,h6';
        $initArray['theme_advanced_disable'] = 'strikethrough';
        $initArray['theme_advanced_buttons1'] = 'bold,italic,underline,bullist,justifyleft,justifycenter,justifyright,justifyfull,link,unlink';
        $initArray['theme_advanced_buttons2'] = 'fontselect, fontsizeselect,forecolor,backcolor';
        $initArray['width'] = '320px';
        $initArray['theme_advanced_resizing'] = 'false';

        return $initArray;

     add_filter('tiny_mce_before_init', 'fb_change_mce_buttons');

     add_filter( 'wp_default_editor', create_function('', 'return "tinymce";') );

and echoing the editor, in the option page section:

<?php the_editor($options['MoobAboutText'], "MoobAboutText", "", true); ?>

it worked like a charm. but when i tried to use "the_editor" once again, it got massed up.

What is the best method to get this done? you know what? forget about "best"... give me "working method", and it will do...

share|improve this question
you can see the first and second instance of the editor here... i56.tinypic.com/ra9stt.png and the code for the second instance is similart but with different ID: <?php the_editor($options['MoobWelcomeText'], "MoobWelcomeText", "", true); ?> – Asaf Chertkoff Mar 8 '11 at 8:51
What i really want is a way to enter manually the tinyMCE for each textarea, but some how i can't get to disable the default preference of the tinyMCE in wordpress... some one has a GOOD a-z tutorial for this?... please... – Asaf Chertkoff Mar 8 '11 at 9:02
Here's a class that will create a complete secondary TinyMCE editor which mimics the look and functionality of the original. gist.github.com/dcondrey/ae987ec166fde5e35be3 – davidcondrey Jul 3 '14 at 4:16
up vote 2 down vote accepted

It sure wasn't easy but here it comes.

(1)I couldn't get the media button to work in any other way with the editors, while excluding the media buttons from one of the editors, but not from all of them, so i had to use the the_editor();

the JS is conflicting while implementing multi instance of tinyMCE with the_editor(); while trying to implement more the one the_editor(); you'll see that the "HTML" and "VISUAL" tabs are conflicting and although i didn't got deep in the JS, i'm gussing that the cause is the use of an ID selectors for the "edButtonHTML" and "edButtonPreview" buttons.

in my case i didn't mind to hack the core, so i just removed, in wp-includes/general-template.php the content between the lines 1828-1831:

<div id="quicktags"><?php
wp_print_scripts( 'quicktags' ); ?>
<script type="text/javascript"> edToolbar()</script>

(2) and hid the "edButtonHTML" and "edButtonPreview" buttons, in functions.php (this annoying WYSIWYG is not letting me to show you the whole "<"style">" function snipt, but you got the picture:

edButtonPreview {display:none}

edButtonHTML {display:none}

(3) And as the final punch, the media-buttons are also conflicting because here also we're using ID as selectors:

<div id="media-buttons" class="hide-if-no-js">
    <a href="media-upload.php?post_id=0&amp;type=image&amp;TB_iframe=1" id="add_image" class="thickbox" title="Add an Image"><img src="http://testit.yuvalaloni.co.il/wp-admin/images/media-button-image.gif?ver=20100531" alt="Add an Image" onclick="return false;"></a>
    <a href="media-upload.php?post_id=0&amp;type=video&amp;TB_iframe=1" id="add_video" class="thickbox" title="Add Video"><img src="http://testit.yuvalaloni.co.il/wp-admin/images/media-button-video.gif?ver=20100531" alt="Add Video" onclick="return false;"></a>
    <a href="media-upload.php?post_id=0&amp;type=audio&amp;TB_iframe=1" id="add_audio" class="thickbox" title="Add Audio"><img src="http://testit.yuvalaloni.co.il/wp-admin/images/media-button-music.gif?ver=20100531" alt="Add Audio" onclick="return false;"></a>
    <a href="media-upload.php?post_id=0&amp;TB_iframe=1" id="add_media" class="thickbox" title="Add Media"><img src="http://testit.yuvalaloni.co.il/wp-admin/images/media-button-other.gif?ver=20100531" alt="Add Media" onclick="return false;"></a>       

The problem is when you aren't focusing on the editor by click, the media button is acting on the last editor only. the magic to solve this is by adding a Jquery listener that uses the tinyMCE API for focusing on each of the editors as you hover them. The first argument of the "tinyMCE.execInstanceCommand" is the ID of the editor, AKA the ID that you've used in the_editor() functions:

<script type="text/javascript">
    jQuery(document).ready(function($) {

        jQuery('#editor-one').mouseover(function() {
            tinyMCE.execInstanceCommand("MoobWelcomeText", "mceFocus"); 

        jQuery('#editor-two').mouseover(function() {
            tinyMCE.execInstanceCommand("MoobWelcomeText2", "mceFocus");

        jQuery('#editor-three').mouseover(function() {
            tinyMCE.execInstanceCommand("MoobWelcomeText3", "mceFocus"); 

That's it. tell me how it goes. does some one know how to declare a bug in TRAC? i never did it and i think this is a bug, as it won't let wordpress developers use more then one tinyMCE editor, otherwise... unless i missed something.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.