two tinyMCE editors in the same page

Question

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

on functions.php:

function add_admin_theme_styles() {
    wp_enqueue_style('thickbox');
}
    add_action('admin_print_styles', 'add_admin_theme_styles');
        wp_enqueue_script('jquery');
        wp_enqueue_script('media-upload');
    wp_enqueue_script('thickbox');
    wp_enqueue_script('word-count');
    wp_enqueue_script('post');
    wp_enqueue_script('editor');

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...

Answer 1

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>
</div>

(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">
Upload/Insert 
    <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>       
</div>

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.