Support forums » Products » Cute Editor for .NET » How to add buttons with function of inserting mark/tag ?

How to add buttons with function of inserting mark/tag ?

Last post 04-04-2010, 9:28 PM by Kenneth. 2 replies.
Sort Posts: Previous Next

  •  04-01-2010, 8:31 PM 59819

    How to add buttons with function of inserting mark/tag ?

    Reply Quote
    <%
    // The follow code from the help document attached in my CuteEditor  will realize the function of inserting a custombuton.

    ToolControl tc = Editor1.ToolControls["insertcustombutonhere"];
    if (tc != null)
    {
    Image Image1 = new Image();
    Image1.ToolTip = "Insert today's date";
    Image1.ImageUrl = "tools.gif";
    Image1.CssClass = "CuteEditorButton";
    Image1.Attributes["onclick"] = "var d = new Date(); CuteEditor_GetEditor(this).ExecCommand('PasteHTML',false,d.toLocaleDateString())";
    tc.Control.Controls.Add(Image1);
    %>
     
    //But those code can only insert a string after the cursor. I want to insert a tag such as [vi][/vi]. When there are some characters selected the tag will wrap it, eg: [vi]selected characters[/vi]. And when there are not any character selected the tag will be placed after the cursor, eg:the  cursor[vi][/vi]. I know that we can finish it with javascript, but I believe that some functions internal the CE like CuteEditor_GetEditor(this).Exec*** will be more effective.  The warm-hearted thread reader who will provide me some heuristic code?

  •  04-02-2010, 8:14 PM 59845 in reply to 59819

    Re: How to add buttons with function of inserting mark/tag ?

    Reply Quote
    If it's a common webcontrol I may use those follow code to realize my function:

    Image Image2= new Image();
    Image2.ToolTip = "Insert today's date";
    Image2.ImageUrl = "tools.gif";
    Image2.CssClass = "CuteEditorButton";
    Image2.Attributes["onclick"] = "document.getElementById('" + Editor1.ClientID + "').focus(); var slct=(document.selection)? (document.selection.createRange()): ((document.getSelection)?(document.getSelection()): null); if(slct ){slct.text='[vi]'+slct.text+'[/vi]';}else{}";
    tc.Control.Controls.Add(Image2);
     
    but it won't work on the CE.

  •  04-04-2010, 9:28 PM 59860 in reply to 59845

    Re: How to add buttons with function of inserting mark/tag ?

    Reply Quote
    Hi sageking2 ,
     
    Try the example below
     
    1. <%@ Page Language="C#" %>   
    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.         Image Image2 = new Image();   
    13.         Image2.ToolTip = "Insert today's date";   
    14.         Image2.ImageUrl = "tools.gif";   
    15.         Image2.CssClass = "CuteEditorButton";   
    16.         Image2.Attributes["onclick"] = "addMyTag()";   
    17.         tc.Control.Controls.Add(Image2);   
    18.         base.OnLoad(e);   
    19.     }   
    20. </script>   
    21.   
    22. <body>   
    23.     <form id="Form1" runat="server">   
    24.         <CE:Editor ID="editor1" runat="server" TemplateItemList="insertcustombutonhere">   
    25.         </CE:Editor>   
    26.     </form>   
    27. </body>   
    28. </html>   
    29.   
    30. <script>   
    31. var editor1=document.getElementById("<%= editor1.ClientID %>");   
    32. function getSelectedHTML(){   
    33.       // get the active editor window   
    34.       var editwin = editor1.GetWindow();   
    35.   
    36.   
    37.       // get the active editor document   
    38.       var editdoc = editor1.GetDocument();   
    39.   
    40.       var rng=null,html="";    
    41.       if (document.selection && document.selection.createRange){   
    42.         rng=editdoc.selection.createRange();   
    43.         html=rng.htmlText||"";   
    44.       }else if (window.getSelection){   
    45.         rng=editwin.getSelection();   
    46.   
    47.         if (rng.rangeCount > 0 && window.XMLSerializer){   
    48.           rng=rng.getRangeAt(0);   
    49.           html=new XMLSerializer().serializeToString(rng.cloneContents());   
    50.         }   
    51.       }   
    52.       return html;   
    53.  }   
    54. function addMyTag()   
    55. {   
    56.   
    57. editor1.PasteHTML("<vi>"+getSelectedHTML()+"</vi>");   
    58. }   
    59. </script>  
    Regards,
     
    Ken
View as RSS news feed in XML