Documentation Center

Find a place and then add a custom panel

This section demonstrates how to find the place to add a panel, then we add and render the empty panel.

Adding a custom panel requires a bit of DOM manipulation and some timing. First we need something like this to find the correct place to render your custom panel:
function findWindowAndEditor(fr)
{
   if(fr.Editor)
     return {win:fr, editor:fr.Editor};
   else if(fr.frameElement && fr.frameElement.contentWindow.Editor)
     return {win:fr, editor:fr.frameElement.contentWindow.Editor};
   else 
   {
     for(var i = 0;i < fr.frames.length; i++)
       var obj = findWindowAndEditor(fr.frames[i]) // dig deeper
     return obj;
   }
     return false;
}
Which we can call like this:
var obj = findWindowAndEditor(top);
This returns an obj which contains a win property, and the Editor (Content Editor itself). From obj.win.document we can find the customPanel now. However the Content Editor UI framework might be taking a moment to actually create that <div>, and the browser might need a moment to lay it out, when you do the following:
Editor.getScope().set("showCustomPanel", true); 
This code waits until everything exists before continuing:
var doc;
var editor;
var to;

function init(obj)
{
  if(obj && obj.editor)
  {
    doc = obj.win.document;
    editor = obj.editor;

    //wait until the panel is ready 
    if(editor.getScope().get("showCustomPanel"))
      window.setTimeout(function(){render();},100); 
  }
  else //editor may need some time to start 
    to = window.setTimeout(function(){ init(obj);}, 50); 
}

var rootEl;

function render()
{
  rootEl = doc.getElementById("customPanel"); 
  if(rootEl) 
  { 
    // go put something in the panel 
  }
  else //custom panel sometimes needs time to be rendered by Xopus 
  { 
    if(editor.getScope().get("showCustomPanel")) 
      window.setTimeout(function(){render();},50); 
  } 
}