New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Editor In RadWindow

  • Show/Hide Border
  • Table Properties
  • Delete Table
  • Row
    • Insert Row Above
    • Insert Row Below
    • Delete Row
  • Column
    • Insert Column to the Left
    • Insert Column to the Right
    • Delete Column
  • Cell
    • Merge Cells Horizontally
    • Merge Cells Vertically
    • Split Cell Horizontally
    • Split Cell Vertically
    • Delete Cell
  • Cell Properties
  • Table Properties
  • Properties...
  • Image Map Editor
  • Properties...
  • OpenLink
  • Remove Link
  • Insert Select
  • Cut
  • Copy
  • Paste
  • Paste from Word
  • Paste Plain Text
  • Paste As Html
  • Paste Html

This demo shows a common case where the editor is used in a layout with limited space (for example in forums). In such scenario you can define a custom button that will open a RadWindow dialog that contains another editor that has full set of tools, thus allowing your users to get the full functionality of the RadEditor control. Once the user insert and edit the content, it can send it back to the editor on the main page by using RadWindow's and RadEditor's client-side API.

Here, you can open the "advanced editor" via the custom Open Advanced Editor tool -

To add the custom button to the toolbar, put the following inner <telerik:EditorTool Name="RichEditor" ..> tag inside the <Tools> and <telerik:EditorToolGroup tags:

< telerik:RadEditor ID ="RadEditor1">
   
< Tools >
       
< telerik:EditorToolGroup >
           
< telerik:EditorTool Name ="RichEditor" Text ="Open Advanced Editor" ShowText ="true" />
        </
telerik:EditorToolGroup >
   
</ Tools >
</ telerik:RadEditor >

Specify an icon for the custom button (if you are using the Lightweight RenderMode, follow the Set Button State article instead):

<style type="text/css">
  .reButton_text  { width: auto !important;  }
  .reToolbar.Telerik .RichEditor {  background-image: url(Icons/Open.gif) !important; }
<
/style>

After that register the code that will launch the dialog and set the content from the parent page to the editor in RadWindow:

<telerik:RadWindow
                    OnClientShow ="SetDialogContent" 
                    OnClientPageLoad
="SetDialogContent"
                    NavigateUrl
="EditorInWindow.aspx"
                    ...
                   
 />
<script type="text/javascript">
var editorContent = null;

Telerik.Web.UI.Editor.CommandList["RichEditor"] = function(commandName, editor, args)
{   
    editorContent
= editor.get_html(true); //get RadEditor content
   
$find("<%=DialogWindow.ClientID%>").show(); //open RadWindow
};

function
SetDialogContent(oWnd)
{            
   
var contentWindow = oWnd.get_contentFrame().contentWindow;
    if
(contentWindow && contentWindow.setContent)
    {
       
window.setTimeout(function()
        {                
            contentWindow.setContent(editorContent)
;   //pass and set the content from the mane page to RadEditor in RadWindow
       
}, 500);
   
}
}
</script>

The next step is to define the setContent function inside the EditorInWindow.aspx (the page that will be loaded by RadWindow). This function sets the content from RadEditor on the parent page to the editor in RadWindow:

<script type="text/javascript">    
function setContent(content)
{
   
var editor = $find("<%= editor1.ClientID %>");
    if
(editor) editor.set_html(content);  //set content from the parent page to RadEditor in RadWindow
}
</script>

To load the editor in RadWindow in FullScreen mode execute this line editor.fire("ToggleScreenMode"); in the OnClientLoad event of RadEditor

<script type="text/javascript">    
function OnClientLoad(editor)            
{
    editor.fire(
"ToggleScreenMode"); //set RadEditor in Full Scree mode                                
}
</script>

To add a "Save and Close" button on the editor in RadWindow toolbar, put the following tag in the ToolsFile.xml file (this file is available in the demo folder)

< tool name ="SaveAndClose" text ="Save and Close" showtext ="true"   />

Add an icon for this button:

<style type = "text / css" >
   html
, form , body {  height : 100%;     margin : 0px; }
   . reButton_text  {  width : auto !important; }
   # editor1Bottom UL {  float :right !important;  }
   . reToolbar . Telerik . SaveAndClose {  background-image : url(Icons/Save.gif) !important; }
<
/ style >

To close the window and supply the modified content to the editor on the main page register the OnClientCommandExecuting event and function

< script type ="text/javascript">
function OnClientCommandExecuting(editor, args)
{
   
var commandName = args.get_commandName() ;   //returns the executed command
   
   
if (commandName == "SaveAndClose" )
   {
       
var radWindow = GetRadWindow() ;
       var
browserWindow = radWindow.get_browserWindow() ;
       
browserWindow.SetEditorContent(editor.get_html( true )) ;     //set the editor content on RadWindow to the editor on the parent page
       
radWindow. close () ; //close RadWindow
       
args.set_cancel( true ) ; //cancel the SaveAndClose command
   

}
</ script >
< telerik:RadEditor  
    OnClientCommandExecuting ="OnClientCommandExecuting"
    OnClientLoad="OnClientLoad"
   
ID ="editor1" Runat="server" Skin="Telerik"
    ToolsFile ="ToolsFile.xml">
</ telerik:RadEditor >

to obtain and set the content register the SetEditorContent function on the main page:

<script type="text/javascript">
       
function SetEditorContent(content)
        {            
           $find(
"<%=RadEditor1.ClientID%>").set_html(content);  //set content to RadEditor on the mane page from RadWindow
       
}
</script>

  • DefaultVB.aspx
    • DefaultVB.aspx
    • EditorInWindow.aspx
  • scripts.js
  • styles.css
  • ToolsFile.xml
<%@ Page Theme="Default" Language="vb" AutoEventWireup="true"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
<link href="../Common/styles.css" rel="stylesheet" type="text/css" />
    <link href="styles.css" rel="stylesheet" />
    <script src="scripts.js" type="text/javascript"></script>
    <script type="text/javascript">
        function findDialogWindow() {
            return $find("<%= DialogWindow.ClientID %>");
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-containers">
        <div class="demo-container">
            <telerik:RadWindow RenderMode="Lightweight" OnClientShow="TelerikDemo.SetDialogContent" OnClientPageLoad="TelerikDemo.SetDialogContent"
                NavigateUrl="EditorInWindow.aspx" runat="server" Behaviors="Maximize,Close,Move"
                ID="DialogWindow" VisibleStatusbar="false" Width="800px" Modal="true" Height="700px" Style="z-index: 50000">
            </telerik:RadWindow>
            <telerik:RadEditor RenderMode="Lightweight" ID="RadEditor1" EnableResize="false" runat="server" Width="800px"
                Height="400px" OnClientLoad="TelerikDemo.editor_onClientLoad">
                <Tools>
                    <telerik:EditorToolGroup>
                        <telerik:EditorTool Name="RichEditor" Text="Open Advanced Editor"></telerik:EditorTool>
                        <telerik:EditorTool Name="Bold"></telerik:EditorTool>
                        <telerik:EditorTool Name="Italic"></telerik:EditorTool>
                        <telerik:EditorTool Name="Underline"></telerik:EditorTool>
                        <telerik:EditorTool Name="Cut"></telerik:EditorTool>
                        <telerik:EditorTool Name="Copy"></telerik:EditorTool>
                        <telerik:EditorTool Name="Paste"></telerik:EditorTool>
                        <telerik:EditorTool Name="FontName"></telerik:EditorTool>
                        <telerik:EditorTool Name="RealFontSize"></telerik:EditorTool>
                    </telerik:EditorToolGroup>
                </Tools>
                <Content>
                <img src="../../images/productLogoLight.gif" alt="product logo" />is the successor of the well known industry standard Editor for ASP.NET. The tight integration with ASP.NET AJAX and the powerful new capabilities make Telerik's WYSIWYG Editor a flexible and lightweight component, turning it into the fastest loading Web Editor. Among the hottest features are:
                <ul>
                    <li><em>Single-file, drag-and-drop deployment</em></li>
                    <li><em>Built on top of ASP.NET AJAX</em></li>
                    <li><em>Unmatched loading speed with new semantic rendering </em></li>
                    <li><em>Full keyboard accessibility</em></li>
                    <li><em>Flexible Skinning mechanism</em></li>
                    <li><em>Simplified and intuitive toolbar configuration</em></li>
                    <li><em>Out-of-the-box XHTML-enabled output</em></li>
                </ul>
                </Content>
            </telerik:RadEditor>
        </div>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance