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);
}
}