Skip to content

Problems with Wysiswyg Editors... #10

Closed
matiazar opened this Issue Jun 27, 2011 · 8 comments

3 participants

@matiazar

Hi

Im testing your JQuery Easytabs. I have a little problem with it... I think for what I read that is not a problem of this control, elsewhere of the other ones... but maybe someone do it work !!

When I have a TAB with a textarea box with component like tinymce or ckeditor... and if my page load on another tab - so when i go to the tab of the riched html area, i cannot see the text inside it... and the editor is disabled.
I readed is a problem of creating the editor on a hidden div.

can anyone make it works ?

thanks

@JangoSteve
Owner

Yeah, if those libraries have problems loading on a hidden div, I'd consider posting a bug report for that project. In the meantime, you might try delaying the TinyMCE initialization until the tab it's contained in is activated. You can use the easytabs:after callback hook to do this:

$('#tab-container').bind('easytabs:after', function(evt, tab, panel, data) {
  if ( panel.is('#third-tab') ) {
    tinyMCE.init();
  }
});
@matiazar

Hi ! thanks 4 your answer.. I thnk i have tried something like that.. i dont remember becuase it was a few month ago, i will try again this week... and comment what happends !!

@JangoSteve
Owner

Have you had any luck with this? I'd like to go ahead and close this issue out if possible.

@matiazar

I will try this tomorrow !! that i need to apply it to a new proyect... and i will confirm you !
thanks again

@matiazar

That works perfect...

how can i do now if the user refresh the page, and the first panel opened is '#third-tab'
how can i do the same on

$(document).ready(function() {
if ( panel.is('#tab_descripcion') ) {
tinyMCE_init();
}
});

???
thanks a lot.. my brain is not working this days !!

@JangoSteve
Owner

I would try something like this:

$(document).ready(function() {
  $tabContainer.easytabs();

  if ( $('#third-tab').is(':visible') ) {
    tinyMCE.init();
  } else {
    $('#tab-container').bind('easytabs:after', function(evt, tab, panel, data) {
      if ( panel.is('#third-tab') ) {
       tinyMCE.init();
      }
    });
  }
});

Or this way would be more optimal (since it only calls tinyMCE.init() once at most), but I'm not 100% it'll work:

$(document).ready(function() {
  $tabContainer.easytabs();
  var $mcePanel = $('#third-tab');

  if ( $mcePanel.is(':visible') ) {
    tinyMCE.init();
  } else {
    $mcePanel.one('show', function() {
       tinyMCE.init();
    });
  }
});
@matiazar

I try the first one and is excellent !!!! thanks men. You are great !

@matiazar matiazar closed this Jul 15, 2011
@heldchen

see issue 15 for a different solution

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.