Documentation Center

Getting started with custom panels

An explanation of how the custom panel can only rendered in the top window.

Content Editor exists as a Javascript object called Editor in the API. When you load a document, Content Editor creates an iframe to load this document in. So essentially you have this:

  • window (index.html) (Editor)
    • iframe (about:blank/html5.html) (the document rendering)

Each page has its own document object which is a reference to the HTML DOM of the page. Each page also has its own Javascript scope and can contain other JavaScript code. API script is always added in the document iframe.

The UI exists in the top window, and therefore exists in the DOM of the document of window:

 window.document.getElementById("customPanel")

But this is not always going to work. What if Content Editor is itself is in an iframe, as it is for example when used in Content Delivery?

  • window (something.html)
    • iframe (index.html) (Editor)
      • iframe (about:blank/html5.html) (the document rendering)

Then window.document will not give us the correct DOM to go look for the custom panel.