| Custom Popup Window support
|
| | |
|
User can create his own "Editor style" popup windows.
You should use client-side Editor object's method customPopup:
editorObject.customPopup(cssStyle, popupName, innerSRC, postbackFunc, initFunc, defaultFolder, isEdit);
Parameters:
cssStyle
| Name of CSS class used for this popup, it should be defined in style.css file in /Editor/ed_styles folder.
Example:
.popup_fieldset
{
width: 300px;
height:115px;
}
Parameter should be set "popup_fieldset".
| | popupName | Name of popup window, it should be defined in localization files (en.xml, es.xml ...) in /Editor/ed_localization folder.
Example for en.xml file:
<popup name="fieldset" create-title="Insert Fieldset" edit-title="Edit Fieldset">
<field name="width" value="Width" />
<field name="height" value="Height" />
<field name="padding" value="Padding" />
<field name="margin" value="Margin" />
<field name="ok" value="OK" />
<field name="cancel" value="Cancel" />
</popup>
Parameter should be set "fieldset".
| | innerSRC | Name of .HTML or .ASPX file that will be used for inner iframe of this popup.
Example: "__fieldset.aspx"
| | postbackFunc | Name of JavaScript function called when Cancel or OK button of this popup was clicked. It is used for validation and executing some actions.
This function has two parameters:
- doc - document element of popup's inner iframe.
- popup_iframe - main iframe element of popup.
When OK clicked, if the function returns true - popup will be closed, otherwise popup will not be closed.
Example:
var element = ...; // created/editing element
var editor = ...; // Editor's client-side object
function postback(doc, popup_iframe) //on OK and Cancel buttons click
{
if(doc != null) // OK clicked
{
// get fields values from popup
var width = doc.getElementById("widthField" ).value;
...
// check input fields and highlight them on error
if((isNaN(width) && width.length > 0) || width < 0)
{
alert("Not correct Width");
doc.getElementById("widthField").focus();
return false; // don't close popup
}
...
// update properties of the element
element.style.width = (!isNaN(width) && width.length > 0)?(width+"px"):"";
...
}
else // Cancel Clicked
{
// restore saved Editor's content (after success InsertHtml)
editor.RestoreContent();
}
return true; // close popup
}
| | initFunc | Name of JavaScript function called when popup's inner iframe is loaded (with innerSRC). It is used for popup's inner content initialization.
This function has two parameters:
- doc - document element of popup's inner iframe.
- popup_iframe - main iframe element of popup.
Example:
var element = ...; // created/editing element
var editor = ...; // Editor's client-side object
function init(doc,popup_iframe) // on Popup window content init
{
if(doc != null)
{
// init popup's fields
doc.getElementById("widthField").value =
(element.style.width)?parseInt(element.style.width):"";
...
}
}
| | defaultFolder | Default scripts folder indicator:
- true - default scripts folder (/Editor/ed_scripts) is used for innerSRC.
- false - root folder is used for innerSRC.
| | isEdit | Popup title indicator:
- true - edit-title field of popup xml element is used for popup's title.
- false - create-title field of popup xml element is used for popup's title.
Look at popupName use example above.
|
See Custom_popup.aspx and Custom_ImageUpload_popup.aspx examples in downloaded zip file.
| | |
| "I wanted to say this is probably the best set of tools I have ever worked with,
but the fact that you guys answer questions is phenomenal.
I recommend your stuff to every developer I talk to.
" |
Karl Wilkens |
| Multiweb Communications, Inc. |
| | |
|