How do I control where CKEditor API opens a new new window for the filebrowserBrowseUrl?

Question

MVC5, CKEditor Custom File Manager API

My interface is working well, but when I click on the Image button to select an image to insert, the new window for file selection shows up on the primary monitor in my system (running 4 monitors). So if I'm using monitor 3 to do online editing, it's a little distracting to have to go over to the primary monitor to select the image. It would be better to open the new window on top of my current window.

I don't know how to solve that problem. I wasn't able to readily find a CKEditor configuration setting for this, and I don't understand how to force a view to open, or not open in a particular place.

This is my setup script for invoking CKEditor:

@Section Scripts
<script src="~/scripts/ckeditor/ckeditor.js"></script>
<script>
    CKEDITOR.replace('Model.UserPost.Body', {
        filebrowserBrowseUrl: '/BlogsAndForums/UserPost/ImageDisplay?AnchorPostID=' + @Model.AnchorPostID, //This line routes to the ImageDisplay method and view.  Needs more configuration
        toolbarGroups: [  // Define the toolbar groups as it is a more accessible solution.
            { "name": "basicstyles", "groups": ["basicstyles"] },
            { "name": "links", "groups": ["links"] },
            { "name": "paragraph", "groups": ["list", "blocks"] },
            { "name": "document", "groups": ["mode"] },
            { "name": "insert", "groups": ["insert"] },
            { "name": "styles", "groups": ["styles"] },
            { "name": "about", "groups": ["about"] }
        ],
        removeButtons: 'Underline,Strike,Subscript,Superscript,Anchor,Styles,Specialchar' // Remove the redundant buttons from toolbar groups defined above.
    });
</script>
@Scripts.Render("~/bundles/jqueryval")
End Section

The ImageDisplay method (seen in the filebrowserBrowseUrl: spec) (1) displays a list of images to select from. After (2) clicking on an image, it (3) closes and returns to CKEditor. (4) The URL for the image is populated and everything is fine after that.

The only issue I'm having is where the ImageDisplay View shows up on my monitors.

score 1 · Accepted Answer · edited May 23 '17 at 10:27

This related question explains how to open the popup window in the right desktop (monitor). It's all about setting proper window.open() options.

Now the hard part. Theoretically it should be possible with editor.config.fileBrowserWindowFeatures. The reality is that the Popup plugin, which opens popup windows (wrapper for window.open()) is implemented so badly that it overrides any geometry you set in the config.

It doesn't even return a new window handler for the popup.

So basically there's nothing you can do except of (which is a very, very nasty hack):

var org = window.open;
window.open = function() { 
  var args = Array.prototype.slice.call(arguments, arguments); 
  console.log( args ); 
  args[ 2 ] = args[ 2 ].replace( /height=\d+/g, 'height=100' ); 
  return org.apply( window, args); 
}

I created an issue on CKEditor bug tracker. Hopefully it will smooth out the plugin.

I decided not to deal at this time with where the window opens, but I went ahead and marked this as the answer because it does answer the question. I decided to wait and see what comes of the CKEditor submission you made before integrating what you labelled as a 'hack'. Thx for validating the issue. — Alan, Mar 17 '16 at 22:24

How do I control where CKEditor API opens a new new window for the filebrowserBrowseUrl?

1 Answers1