1

Topic: Toggle elements with API (TinyMCE 4)

Hi!

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!
Radolfi

2

Re: Toggle elements with API (TinyMCE 4)

Hi,

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):

win.find('#myContainter').hide();

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:

tinymce.DOM.hide('myContainter');

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)