Search code examples
tinymce-4wordpress-3.9

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.