Support forums » Products » Cute Editor for .NET » Re: The Cut effect for custom buttons

The Cut effect for custom buttons

Last post 05-24-2010, 11:14 PM by jonathanexact. 3 replies.
Sort Posts: Previous Next

  •  05-23-2010, 10:51 PM 61245

    The Cut effect for custom buttons

    Reply Quote
    Hi,
     
    Is it possible to use the same effect as the Cut button (only enable the button when there is selected text) with custom buttons in the toolbar?
     
    In the same vein, I don't seem to be able to set a custom button to use the CuteEditorButtonActive CSS class (to get the 'selected/ pressed' effect, like the LTR/ RTL buttons).
     
     
    Can anyone help? Thanks!
     
     

  •  05-24-2010, 3:25 AM 61255 in reply to 61245

    Re: The Cut effect for custom buttons

    Reply Quote
    Hi jonathanexact,
     
    Please try this example
     
    1. <%@ Page Language="C#" ValidateRequest="false" %>   
    2.   
    3. <%@ Register TagPrefix="CE" Namespace="CuteEditor" Assembly="CuteEditor" %>   
    4. <html>   
    5. <head>   
    6. </head>   
    7.   
    8. <script runat="server">   
    9.     protected override void OnLoad(EventArgs e)   
    10.     {   
    11.         CuteEditor.ToolControl tc = Editor1.ToolControls["insertcustombutonhere"];   
    12.         if (tc != null)   
    13.         {   
    14.             System.Web.UI.WebControls.Image Image1 = new System.Web.UI.WebControls.Image();   
    15.             Image1.ID = "customIco";   
    16.             Image1.ToolTip = "Insert today's date";   
    17.             Image1.Style.Value = "filter:alpha(opacity=70); -moz-opacity:0.7; opacity:0.7;margin:1px; vertical-align:middle;";   
    18.             Image1.ImageUrl = "~/CuteSoft_Client/CuteEditor/Themes/Office2003/Images/cut.gif";   
    19.             Image1.CssClass = "CuteEditorButton";   
    20.             SetMouseEvents(Image1);   
    21.             Image1.Attributes["onclick"] = "var d = new Date(); CuteEditor_GetEditor(this).ExecCommand('PasteHTML',false,d.toLocaleDateString())";   
    22.             tc.Control.Controls.Add(Image1);   
    23.   
    24.         }   
    25.         base.OnLoad(e);   
    26.     }   
    27.     void SetMouseEvents(WebControl control)   
    28.     {   
    29.         control.Attributes["onmouseover"] = "CuteEditor_ButtonCommandOver(this)";   
    30.         control.Attributes["onmouseout"] = "CuteEditor_ButtonCommandOut(this)";   
    31.         control.Attributes["onmousedown"] = "CuteEditor_ButtonCommandDown(this)";   
    32.         control.Attributes["onmouseup"] = "CuteEditor_ButtonCommandUp(this)";   
    33.         control.Attributes["ondragstart"] = "CuteEditor_CancelEvent()";   
    34.     }   
    35. </script>   
    36.   
    37. <body>   
    38.     <form id="Form1" runat="server">   
    39.         <CE:Editor ID="Editor1" runat="server" TemplateItemList="insertcustombutonhere">   
    40.         </CE:Editor>   
    41.        
    42.     </form>   
    43. </body>   
    44. </html>   
    45.   
    46. <script>   
    47. var editor1=document.getElementById("<%= Editor1.ClientID %>");   
    48. var customIco=document.getElementById("Editor1_ctl00_customIco");   
    49. function changeStyle()   
    50. {   
    51.  var editor1doc = editor1.GetDocument();   
    52.  var editwin = editor1.GetWindow();   
    53.  if (document.selection && document.selection.createRange)   
    54.  {   
    55.       if(editor1doc.selection.createRange().text!="")   
    56.     {   
    57.         customIco.style.cssText="";   
    58.     }   
    59.       else  
    60.     {   
    61.         customIco.style.cssText="filter:alpha(opacity=70);  -moz-opacity:0.7; opacity:0.7;margin:1px; vertical-align:middle;";   
    62.     }   
    63.  }   
    64.   else if (window.getSelection)   
    65.   {   
    66.     if(editwin.getSelection()!="")   
    67.     {   
    68.      customIco.style.cssText="";   
    69.     }   
    70.        else  
    71.     {   
    72.         customIco.style.cssText="filter:alpha(opacity=70);  -moz-opacity:0.7; opacity:0.7;margin:1px; vertical-align:middle;";   
    73.     }   
    74.   }   
    75.   
    76. }   
    77.  setInterval(changeStyle ,100)   
    78. </script>  
    Regards,
     
    ken

  •  05-24-2010, 7:20 AM 61267 in reply to 61255

    Re: The Cut effect for custom buttons

    Reply Quote
    Hi Ken,
     
    Thanks for the example! I see that I shouldn't use CreateCommandButton() for this.
     
    I have 1 more issue though: I've got the effect I wanted (if text is selected, the button is enabled, otherwise it's disabled).
    This works fine until I switch over to the HTML view and back to Normal. The overridden onclick, onmouseover, onmouseout, etc still work, but the enable/ disable effect (hooked to editor.GetDocument() onselectionchange) is gone.
     
    Note: Only the animation is gone, the code still works (I turn on and off the onclick, onmouseover functions in the onselectionchange function mentioned).
     
    If it makes a difference, I'm inserting the button with InsertToolControl(), and it's not within the custombutton placeholder. It's actually an [insert hyperlink] button that inserts links to the document selected from a list of documents.
     
    Any ideas? Thanks!
     

  •  05-24-2010, 11:14 PM 61282 in reply to 61267

    Re: The Cut effect for custom buttons

    Reply Quote
    Found the reason: the onselectionchange event was removed between switching to code view and normal view. I'm using a workaround:
     
    1. var tabEditOnCommandRunning = false;    
    2. function CuteEditor_OnCommand(editor, command, ui, value) {    
    3.     if (command.toLowerCase() == 'tabedit') {    
    4.         if (tabEditOnCommandRunning) return false;    
    5.         tabEditOnCommandRunning = true;    
    6.         editor.ExecCommand(command, ui, value);    
    7.         var editdoc = editor.GetDocument();    
    8.         if (editdoc.attachEvent)    
    9.             editdoc.attachEvent('onselectionchange', function(event) { ... });   
    10.         else if (editdoc.addEventListener)    
    11.             editdoc.addEventListener('selectionchange', function(event) { ... }, true);   
    12.         tabEditOnCommandRunning = false;    
    13.         return true;       
    14.     }   
    15. }  
     
    so it works now. I'm not too sure if you guys think this is a bug/ unsupported feature, but I'm leaning towards bug.
     
     
     
View as RSS news feed in XML