<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ClientEvents._Default" %>

<%@ Register Assembly="RadEditor.Net2" Namespace="Telerik.WebControls" TagPrefix="radE" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Client Events</title>
  <link href="C:\Clients\Falafel\Training\Telerik\RadControls\rad editor\projects\ClientEvents\ClientEvents\RadControls\Editor\Skins\WebBlue\Editor.css"
    rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    
<script type="text/javascript">
//<![CDATA[

  function ClientLoad(editor)
  {                               
    var style = editor.GetContentArea().style;
    style.backgroundColor = "WhiteSmoke";
    style.color= "DarkGray";
    style.fontFamily= "Arial";
    style.fontSize= "15";

    var SetWindowFunction = function ()
    {    
    window.setTimeout(function()
         {
            // 1=editor, 2=HTML, 3=Preview
            editor.SetMode(3); 
            editor.SetSize(650, 100);                        
         }, 1);
    }
    window.onload = SetWindowFunction;

  }

  function ClientInit(editor)
  { 
    Log("OnClientInit"); 
  }

  function ClientCommandExecuting (editor, commandName, tool)
  {
      var selValue = 
        (tool && tool.GetSelectedValue) ? tool.GetSelectedValue() : "none";
      if (commandName != "Enter")
      {
        Log("OnClientCommandExecuting. Command name:" + 
          commandName + 
          ". Selected Value:" + 
          selValue); 
      }
  }

  function ClientCommandExecuted(editor, commandName, tool)
  {
      var selValue = 
        (tool && tool.GetSelectedValue) ? tool.GetSelectedValue() : "none";
      if(commandName != "Enter")
      {
        Log("OnClientCommandExecuted. Command name:" + 
          commandName + 
          ". Selected Value:" + 
          selValue); 
      }
  }

  // 1=design, 2=HTML, 3=Preview
  function ClientModeChange(editor)
  {
     window.setTimeout( function()
          {
            var mode = editor.GetMode(); 
            var modeName = ""; 
              switch (mode)
              {
                 case 1: modeName = "Design"; break; 
                 case 2: modeName = "HTML"; break; 
                 case 3: modeName = "Preview"; break; 
             }
            Log("OnClientModeChange: " + mode + ": " + modeName);                 
          }
          ,10
      );                 
  }

  function ClientSubmit(editor)
  {                          
    editor.Document.execCommand("Bold", false, null);      

      Log("OnClientSubmit"); 
      return confirm( "Are you sure you want to submit?");                 
  }

  function ClientCancel(editor)
  {
      Log("OnClientCancel"); 
      return confirm("Are you sure you want to cancel your changes?"); 
  }
  
  function GetSelection()
  {
    var selection = <%=reEdit.ClientID%>.GetSelectionHtml();
    var logHtml = <%=reLog.ClientID%>.GetHtml(false); 
    <%=reLog.ClientID%>.SetHtml(logHtml + 
      '<div style="font-weight: bold">' + selection + '</div>'); 
  }

  function SetAllEditorsBold()
  {            
    var allEditors = RadEditorGlobalArray;   

    for (i=0; i<allEditors.length; i++)
    {
      allEditors[i].Document.execCommand("Bold", false, null);                                 
    }  
  }
  
  function InsertDiv()
  {
      var editor = <%=reEdit.ClientID %>; 
      editor.PasteHtml(
       '<div style="width:100px; height:25px; background-color:#CCCCCC; ' +
       'filter:alpha(Opacity=50); overflow:auto">Pasted HTML</div>');
  }
  
  function Log(message)
  {
    var logHtml = <%=reLog.ClientID %>.GetHtml(false);
    <%=reLog.ClientID %>.SetHtml(logHtml + "<div>" + message + "</div>");
  }
//]]>
</script>
    
      <radE:RadEditor ID="reLog" runat="server" 
        Editable="True" 
        EnableServerSideRendering="True"
        EnableTab="True" 
        HasPermission="True" 
        RenderAsTextArea="False"
        Skin="WebBlue" 
        ConvertTagsToLower="True" 
        ConvertToXhtml="False" 
        ShowHtmlMode="False" 
        ShowPreviewMode="False" 
        ShowSubmitCancelButtons="False"         
        OnClientLoad="ClientLoad" 
        >        
      </radE:RadEditor>
            
      <br/>
    
<radE:RadEditor ID="reEdit" runat="server" 
  ConvertTagsToLower="True" 
  ConvertToXhtml="False"
  DocumentsFilters="*.*" 
  EnableClientSerialize="True" 
  EnableContextMenus="True" 
  EnableDocking="True"
  EnableEnhancedEdit="True" 
  EnableHtmlIndentation="True" 
  EnableServerSideRendering="True"
  EnableTab="True" 
  OnClientCancel="ClientCancel" 
  OnClientCommandExecuted="ClientCommandExecuted" 
  OnClientCommandExecuting="ClientCommandExecuting"         
  OnClientModeChange="ClientModeChange" 
  OnClientSubmit="ClientSubmit" 
  PassSessionData="True"
  RenderAsTextArea="False" 
  Skin="WebBlue" 
  SpellEditDistance="1" 
  TemplateFilters="*.html,*.htm"
  ToolbarMode="Default" 
  Height="200px">
</radE:RadEditor>
      
      <input type="button" value="Log Selection" onclick="GetSelection()" />
      <input type="button" value="Bold All Editors" onclick="SetAllEditorsBold()" />
      <input type="button" value="Insert Div" onclick="InsertDiv()" />

    </form>
</body>
</html>
