TINY NEWS: TinyMCE 5 Developer Challenge now on.  Find out more

Create custom dialogs

Learn how to make custom dialogs with WindowManager.

Contribute to this page

Dialogs as HTML pages

HTML based pages can be loaded into TinyMCE dialogs by using the WindowManager.This makes it easier to create plugins and fully support CDNs.

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

Parameters can be passed to the dialog by using the second parameter of the WindowManager.open

// Opens an 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'
});

Access these parameters from the 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);

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.