We have created a Page Wizard inside the RadEditor that is activated by a custom button. It calls a custom dialog window with the following:
//Page Wizard
Telerik.Web.UI.Editor.CommandList["PageWizard"] = function(commandName, editor, args)
{
var myCallbackFunction = function(sender, args)
{
//Paste result from the wizard into the editor's content area
//???????????
}
editor.showExternalDialog(
'PageWizard.aspx',
{},
570,
420,
myCallbackFunction,
null,
'Page Wizard',
true,
Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,
false,
true);
};
The wizard is a standard asp.net control that gathers information from the user, for example (the ... is there for brevity):
<asp:Wizard runat="server">
<WizardSteps>
<asp:WizardStep title="Enter Page Title" runat="server">...</asp:WizardStep>
<asp:WizardStep title="Enter Description" runat="server">...</asp:WizardStep>
<asp:WizardStep title="Enter Keywords" runat="server">...</asp:WizardStep>
<asp:WizardStep title="Select a Background Color or Select a Background Repeat Image" runat="server">...</asp:WizardStep>
<asp:WizardStep title="Select a Page Layout" runat="server">...</asp:WizardStep> // these are external CSS files
<asp:WizardStep title="Select a Pre-Made Banner Image" runat="server">...</asp:WizardStep>
<asp:WizardStep title="Complete" runat="server">...</asp:WizardStep>
</WizardSteps>
</asp:Wizard>
The Page Wizard above collects this information and is available upon the Complete stage. The problem lies in the fact that we cannot insert the above into the editors content area by means of the myCallBackFunction above i.e.
var myCallbackFunction = function(sender, args)
{
//Paste result from the wizard into the editor's content area
//???????????
}
Can someone shed some light on this please as we are at a stand still. Even an example of how to find the <title> tag and insert the inputted title from the wizard and/or insert into the <body> tag a background color or image property.
Much appreciated for any input from anyone, thanks.
Grant
1 Answer, 1 is accepted
0
Hello Grant,
You have taken the correct approach, and we are not sure what exactly the problem is, but it is likely one of the three:
1) The callback function is not called when closing the dialog (very unlikely if you followed the example how to create a custom dialog example)
2) The args object does not contain information from the dialog (however, this is also described in the custom dialog example)
3) Not knowing how to access/set/configure these elements (title, meta, body) in the editor's content area.
One thing that you need here is to get access to the editor's content area document element and proceed further by accessing the objects, e.g.
Here you can see an example of the PageProperties dialog:
http://demos.telerik.com/aspnet-ajax/editor/examples/completehtmlsupport/defaultcs.aspx
Here is a demo describing how to run an existing editor dialog as external:
http://demos.telerik.com/aspnet-ajax/editor/examples/externaldialogspath/defaultcs.aspx
Sincerely yours,
Tervel
the Telerik team
Check out Telerik Trainer , the state of the art learning tool for Telerik products.
You have taken the correct approach, and we are not sure what exactly the problem is, but it is likely one of the three:
1) The callback function is not called when closing the dialog (very unlikely if you followed the example how to create a custom dialog example)
2) The args object does not contain information from the dialog (however, this is also described in the custom dialog example)
3) Not knowing how to access/set/configure these elements (title, meta, body) in the editor's content area.
One thing that you need here is to get access to the editor's content area document element and proceed further by accessing the objects, e.g.
var myCallbackFunction = function(sender, args)
{
//Paste result from the wizard into the editor's content area
var doc = editor.get_document();
//Get reference to HEAD tag
var head = doc.getElementsByTagName("HEAD")[0];
//Get the title
var title = doc.getElementsByTagName("TITLE")[0];
if (!title)
{
title = doc.createElement("TITLE");
head.appendChild(title);
}
//Get reference to HEAD tag
var head = doc.getElementsByTagName("HEAD")[0];
//Get the title
var title = doc.getElementsByTagName("TITLE")[0];
if (!title)
{
title = doc.createElement("TITLE");
head.appendChild(title);
}
}
However, rather than continuing in this direction I would like to invite you to take another approach - either use the existing built-in RadEditor PageProperties dialog (as is), or modify it - by running it as external dialog and replacing its logic with your logic (while keeping the code that provides data exchange with the editor itself).Here you can see an example of the PageProperties dialog:
http://demos.telerik.com/aspnet-ajax/editor/examples/completehtmlsupport/defaultcs.aspx
Here is a demo describing how to run an existing editor dialog as external:
http://demos.telerik.com/aspnet-ajax/editor/examples/externaldialogspath/defaultcs.aspx
Sincerely yours,
Tervel
the Telerik team
Check out Telerik Trainer , the state of the art learning tool for Telerik products.