[SOLVED] TinyMCE 4.x editor.windowManager.open autoscroll and overflow issue

TinyMCE 4.x editor.windowManager.open autoscroll and overflow issue

I am having problem with TinyMCE 4.x custom plugin js for editor.windowManager.open. I used autoScroll: true, height: 500, width: 800 and few more parameters but only height and width gets effect. I can see the scrollbar but it doesn't work and body content are visible.

editor.windowManager.open( {
     autoScroll: true,
     height: 500,
     width: 800,
     resizable : true,

Solution

I had the same problem. It's because wordpress adds the following rule in editor.min.css:

    .mce-window .mce-container-body.mce-abs-layout {
        overflow: visible;
    }

To fix it just add a class to your window:

var win = editor.windowManager.open( {
    autoScroll: true,
    width: 670,
    height: 500,
    classes: 'myAwesomeClass-panel'
});

And target it with some css:

.mce-window.mce-container.mce-myAwesomeClass-panel .mce-container-body.mce-abs-layout {
    overflow: hidden;
}

Adding a class to your panel and applying css to only that will likely prevent any interference with built in wp stuff.