Issue displaying multiple TinyMCE editors with WPAlchemy

1
votes

I have a custom post type with a WPAlchemy admin meta box class including multiple textareas with TinyMCE editors(for adding content to the custom post template). I've gotten the editors to display and function fine, however there is an awkward div at the bottom left of each textarea with "path" and a colon ":"

enter image description here

It would be great if someone knows how to remove what I'm guessing is meta information for the editor (word count ect..) but it doesn't seem to be functioning correctly on save.

Here's what I get when I inspect the element:

<div id="temp_options_desc-3_path_row" role="group" aria-labelledby="temp_options_desc-3_path_voice" tabindex="-1">
  <span id="temp_options_desc-3_path_voice">Path</span>
  <span>: </span><span id="temp_options_desc-3_path"></span>
</div>

Also the textarea and TinyMCE javascript function for displaying WYSIWYG editor:

functions.php:

add_action('admin_print_footer_scripts','admin_print_footer_scripts',99);
function admin_print_footer_scripts()
{
    ?><script type="text/javascript">/* <![CDATA[ */
        jQuery(function($)
        {
            var i=1;
            $('.temp_options_desc').each(function(e)
            {
                var id = $(this).attr('id');

                if (!id)
                {
                    id = 'temp_options_desc-' + i++;
                    $(this).attr('id',id);
                }

                tinyMCE.execCommand('mceAddControl', false, id);

            });
        });
    /* ]]> */</script><?php
}

WPAlchemy metabox class textarea:

<textarea cols="20" rows="20" class="temp_options_desc" name="<?php $mb->the_name(); ?>"><?php $mb->the_value(); ?></textarea>

Thanks!

2
phpwordpresstinymceadmincustom-post-type

2 Answers

1
votes

i published a solution for multiple tinyMCE text editors in metaboxes via WP Alchemy

http://www.kathyisawesome.com/426/multiple-wordpress-wysiwyg-visual-editors/

my code is available on github: https://github.com/helgatheviking/WP-Alchemy-Holy-Grail-Theme

but ultimately the problem you have circled in green, is a CSS issue. your new editor is missing just a tiny bit of style. i can't remember it now, but i'm sure i fixed it in my sample theme.

0
votes

You may use the tinymce setup configuration parameter and remove that div on editor init

tinyMCE.init({
   ...
   setup : function(ed) {
      ed.onInit.add(function(ed, evt) {
          $('#'+ed.id+'_path_row').hide();
      });
   }
});