Topic: Toggle elements with API (TinyMCE 4)


I am coding an extended link plugin for our website buider. The user should select if a link is an external link or an internal link. For external links there should be shown the URL textbox, for internal links an I-Frame with all subpages of the homepage.

Now I have tree elements in my plugin window: a listbox to toggle between internal / external, the standard href filepicker from your link plugin and an iframe with my pagelist.

How can i toggle the visibility of the elements using the API? Currently I try to find the elements:

onselect: function(e) {
  if (e.control.value() == 'intern') { win.find('#href').hide(); win.find('#intlink').show(); }
  else { win.find('#href').show(); win.find('#intlink').hide(); }

But all elments have an absolute position, and my code only affects the input / iframe itself but not the container (including the label). Is there a possibility to toggle the visibility of the items using the API?

Thanx for help!


Re: Toggle elements with API (TinyMCE 4)


I have the same problem.

I have a container which I need to hide/show:

    type: 'container',
    id: 'myContainter',
    // visible: false,
    items: [
            type: 'label',
            text: 'Content'

This doesn't work (it would if it was an INPUT):


And using plain JavaScript hides the element, but leaves an empty space (as using visibility:hidden):

document.getElementById("myContainter").style.display = "none";

Same result if you use:


Shouldn't that trigger "reflow"?

Which is the right way to do it using the API?

Thanks a lot.

Last edited by ignaciogros (2016-04-21 14:05:21)