Creating custom dialogs

Dialogs as HTML pages

In TinyMCE 3.x all dialogs where HTML pages that got loaded into a iframe or window. This was changed in TinyMCE 4 to make it easier to make plugins and fully support CDN:s. But you can still load HTML based pages into TinyMCE dialogs by using the WindowManager.

// Opens a HTML page inside a TinyMCE dialog
editor.windowManager.open({
title: "My html dialog",
url: 'mydialog.html',
width: 700,
height: 600
});

You can also pass in parameters to the dialog just as you could in 3.x by using the second parameter of the WindowManager.open.

// Opens a HTML page inside a TinyMCE dialog and pass in two parameters
editor.windowManager.open({
title: "My html dialog",
url: 'mydialog.html',
width: 700,
height: 600
}, {
arg1: 42,
arg2: "Hello world"
});

You can access these parameters from your mydialog.html page by using this code:

// Get the parameters passed into the window from the top frame
var args = top.tinymce.activeEditor.windowManager.getParams();
console.log(args.arg1, args.arg2);

You can also close the current window by calling:

// Close the front most window (mydialog.html)
top.tinymce.activeEditor.windowManager.close();