Create Custom Dialogs

Learn how to make custom dialogs with WindowManager.

Contribute to this page

Dialogs as HTML pages

In TinyMCE 3.x all dialogs were HTML pages that got loaded into an iframe or window. This was changed in TinyMCE 4 to make it easier to make plugins and fully support CDNs. 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();

Can't find what you're looking for? Let us know.

Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.