Wordpress 3.2 has broken my TinyMCE code

Question

My code was working up until the 3.2 update, where I noticed that tinyMCE has been updated too.

Does anyone have any ideas why this may not work now? I don't get any console errors but I don't get any tinyMCE editors on the page either!

CLARIFICATION: every instance of the TinyMCE editor has disappeared!

FURTHER CLARIFICATION: this is only occurring on my custom post type pages where I have custom instances of the TinyMCE editor. I still have the default "theEditor" MCE on the default Posts area.

function meta_genus_species() {
    global $post;

    $genus = get_post_custom_values( 'genus', $post->ID );
    $species = get_post_custom_values( 'species', $post->ID );
    $etymology = get_post_custom_values( 'etymology', $post->ID );
    $family = get_post_custom_values( 'family', $post->ID );
    $common_names = get_post_custom_values( 'common_names', $post->ID );

    if (!isset($id)) { $id = "etymology"; }
    if (!isset($temp_min)) { $temp_min = plugins_url('images/temp_max.png' , __FILE__); }
    if (!isset($temp_max)) { $temp_max = plugins_url('images/temp_min.png' , __FILE__); }
    if (!isset($pH_min)) { $pH_min = plugins_url('images/pH_max.png' , __FILE__); }
    if (!isset($pH_max)) { $pH_max = plugins_url('images/pH_max.png' , __FILE__); }

$tinyMCE = <<<EOT
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $("#{$id}").addClass("mceEditor");
            if ( typeof( tinyMCE ) == "object" &&
                 typeof( tinyMCE.execCommand ) == "function" ) {
              tinyMCE.settings = {
                theme : "advanced",
                mode : "none",
                language : "en",
                height:"75",
                width:"100%",
                theme_advanced_layout_manager : "SimpleLayout",
                theme_advanced_toolbar_location : "top",
                theme_advanced_toolbar_align : "left",
                theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,temp_min,temp_max,pH_min,pH_max",
                theme_advanced_buttons2 : "",
                theme_advanced_buttons3 : "",
                setup : function(ed) {
                    ed.addButton('temp_min', {
                        title : 'Temperature: Minimum',
                        image : '{$temp_min}',
                        onclick : function() {
                            ed.focus();
                            ed.selection.setContent('[temp_min]');
                        }
                    }),
                    ed.addShortcut("ctrl+1", "temp_min", "temp_min"),
                    ed.addButton('temp_max', {
                        title : 'Temperature: Maximum',
                        image : '{$temp_max}',
                        onclick : function() {
                            ed.focus();
                            ed.selection.setContent('[temp_max]');
                        }
                    }),
                    ed.addButton('pH_min', {
                        title : 'pH: Minimum',
                        image : '{$pH_min}',
                        onclick : function() {
                            ed.focus();
                            ed.selection.setContent('[pH_min]');
                        }
                    }),
                    ed.addButton('pH_max', {
                        title : 'pH: Maximum',
                        image : '{$pH_max}',
                        onclick : function() {
                            ed.focus();
                            ed.selection.setContent('[pH_max]');
                        }
                    });
                }
              };
              tinyMCE.execCommand("mceAddControl", true, "{$id}");
            }
        });
    </script>
EOT;
    echo $tinyMCE;

    ?>
<div class="meta_control normal">
    <p>Description of taxonomy.</p>
    <div class="box">
        <label>Genus</label>
        <p>
            <input name="genus" class="text" value="<?php if(isset($genus[0])) { echo esc_attr( $genus[0] ); } ?>" />
            <span>Testing...</span>
        </p>
    </div>
    <div class="box">
        <label>Species</label>
        <p>
            <input name="species" class="text"  value="<?php if(isset($species[0])) { echo esc_attr( $species[0] ); } ?>" />
            <span>Testing...</span>
        </p>
    </div>
    <p>
        <label>Etymology</label>
        <textarea cols="50" rows="5" name="etymology" id="etymology"><?php if(isset($etymology[0])) { echo esc_attr( $etymology[0] ); } ?></textarea>
        <span>Description</span>
    </p>
    <p>
        <label>Family</label>
        <input name="family" class="text"  value="<?php if(isset($family[0])) { echo esc_attr( $family[0] ); } ?>" />
        <span>Description</span>
    </p>
    <p>
        <label>Common Names</label>
        <input name="common_names" class="text"  value="<?php if(isset($common_names[0])) { echo esc_attr( $common_names[0] ); } ?>" />
        <span>Description</span>
    </p>
</div>
    <?php

}

function meta_authored() {
    global $post;

    $species_author = get_post_custom_values( 'species_author', $post->ID );
    $year_described = get_post_custom_values( 'year_described', $post->ID );

    ?>
<div class="meta_control side">
    <label>Species Author</label>
    <p>
        <input name="species_author" class="text" value="<?php if(isset($species_author[0])) { echo esc_attr( $species_author[0] ); } ?>" />
    </p>
    <label>Year Described</label>
    <p>
        <input name="year_described" class="text" value="<?php if(isset($year_described[0])) { echo esc_attr( $year_described[0] ); } ?>" />
    </p>
</div>
    <?php
}

Answer 1

I found some info on changes in 3.2 that might be relevant:

Aparrently, wp_tiny_mce_preload_dialogs() no longer exists from WP3.2 on. It got replaced by wp_preload_dialogs() which is now being called from wp_quicktags(). wp_quicktags, on his turn, is being called from the_editor() function. So, if you’re using the_editor() you no longer need to manually call the function to preload any dialogs!

If you’re not using the_editor(), make sure to call wp_preload_dialogs() somewhere from your footer in the following manner:

wp_preload_dialogs( array( 'plugins' => 'wpdialogs,wplink,wpfullscreen' ) );

You could try calling wp_preload_dialogs(), or maybe switch to using the_editor() instead of tinyMCE.execCommand().

Also, check out this question; calling wp_tiny_mce() solved my problem.

---

Update: wp_tiny_mce() might be deprecated in 3.3.

Answer 2

The possibility that your custom TinyMCE code broke you theme is pretty, but please - before trying to change or debug it - deactivate your plugins first and - if it doesn't help - switch to the default theme and see if it works.

Then take a look at your meta_genus_species() function and start commenting out the ed.addButton blocks of code. See if it works. If it does, uncomment one, check the result, uncomment the next one, etc.

Answer 3

There is a problem with WP 3.2 and the Visual Editor

Try this:

Anyway, for us, our fix was to open up wp-admin/admin-footer.php and comment out line 36

do_action('admin_footer', '');

Read this: http://documentation.diyartportfolios.com/visual-editor-not-workin

and this: http://wordpress.org/support/topic/upgraded-to-32-visual-editor-buttons-missing