As part of a plugin I'm currently writing, I need to add multiple WordPress RTEs to the admin screens. Since the main screen has tabs that are handled with JavaScript, some of the editors are inside hidden <div> elements, for example:

<div id="terms" class="tab-content">
  <?php wp_editor( null, 'terms', [ 'media_buttons' => false, 'teeny' => true ]); ?>

#terms is hidden until the user clicks on the 'Terms & Conditions' tab. However, when the page loads, the editor instance is rendered oddly, with the controls appearing below the tabs and so forth:

enter image description here

When I add the editor to the first tab (not hidden by default), it renders correctly. I suspect this has something to do with the DOM element not being visible when the TinyMCE instance has loaded, but even initialising the TinyMCE instance manually doesn't work:

// Set up TinyMCE editor:
var i = 1;
$('.wysiwyg textarea').each(function()
  var id = $(this).attr('id');

  if (!id)
    id = 'customEditor-' + i++;

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

Has anyone encountered this problem before? And is there a fix?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.