Support forums » Products » Cute Editor for .NET » Using CuteEditor as a Simple TextBox Form Field

Using CuteEditor as a Simple TextBox Form Field

Last post 04-06-2007, 2:46 AM by thesingu. 5 replies.
Sort Posts: Previous Next

  •  07-27-2006, 5:11 PM 21320

    Using CuteEditor as a Simple TextBox Form Field

    Reply Quote
    I'm new to CuteEditor, but I like it's flexibility so far.  I am creating an email section to our website for feedback and I am using CE as the text area for the user's message.  I would like to also make the 'To' field as a CE, but I'm having problems figuring out how to dumb it down.  I have already removed all the icons, toolbars, and other window items, but I want to perform these additional things on it...
     
    1. - I want it to look like a normal single line textbox so it exactly matches a web form textbox control. Right now it looks like a specialized text area.  I don't want the users to be able to tell the difference.
    2. - I want to allow the user to enter email addresses into the To field. After they leave the To field on the form (onBlur event), I want to perform a callback to the server to check the email addresses against a database.  If they match a pre-authorized email address, then I want to change the email address to a name, turn it blue, and then underline it.  Any email addresses that are not authorized I want to turn them red with no underline.
    3. - If there are more characters than the width of the textbox, I want it to wrap and I want to increase the texbox area by one row size.
     
    Is any of this possible using the CE?  If so, how do I do this?  I see no way of doing this with a regular textbox html form field.
     
    Thanks in advance,
    Jon

  •  07-28-2006, 2:40 AM 21330 in reply to 21320

    Re: Using CuteEditor as a Simple TextBox Form Field

    Reply Quote
    Jon,
     
    Please check this example:
     
     
    The source code of the above example is as following:
     
     
    <%@ Page Language="C#"%>
    <%@ Register TagPrefix="CE" Namespace="CuteEditor" Assembly="CuteEditor" %>
    <html>
        <head>
      <title>Render AS TextBox</title>
      <link rel="stylesheet" href="../example.css" type="text/css" />
      <script language="JavaScript" type="text/javascript" >
       
       function CE_attachEvent()
       {
        // get the cute editor instance
        var editor1 = document.getElementById('<%=Editor1.ClientID%>');
        
        //Get the editor content 
        var editdoc=editor1.GetDocument();
        // attach Event
        if(editdoc.attachEvent)
         editdoc.attachEvent('onkeypress',checkkey);
        else if(editdoc.addEventListener)
         editdoc.addEventListener('keypress',checkkey,true);
       }   
       
       function CE_detachEvent()
       {
        // get the cute editor instance
        var editor1 = document.getElementById('<%=Editor1.ClientID%>');
        
        //Get the editor content 
        var editdoc=editor1.GetDocument();
        // detach Event
        if(editdoc.detachEvent)
         editdoc.detachEvent('onkeypress',checkkey);
        else if(editdoc.removeEventListener)
         editdoc.removeEventListener('keypress',checkkey,true);
       }
       
       function checkkey(event)
       {
        var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
        if(keyCode==13){
         event.returnValue=false;
         event.cancel = true;
        }
       }  
        
      </script>
      </head>
      <body>
       <form runat="server">
        <CE:Editor id="Editor1" AutoConfigure="Minimal" runat="server" Height="60" ShowBottomBar="false"></CE:Editor>
        <br/><br/>
        <INPUT type=button value="Single Line" onclick="CE_attachEvent()">
        <INPUT type=button value="Multiple Line" onclick="CE_detachEvent()">
       </form>
      </body>
     </html>
      <script runat="server">
       void Page_Load(object sender, System.EventArgs e)
       {
        if (!IsPostBack)
        {
         Editor1.Text = "Type here...";
        }
       
       }
      </script> 
     
    Please check this example. I will answer your other questions based on your response.
     
    Keep me posted
     
     

    asp.net Chat http://cutesoft.net/ASP.NET+Chat/default.aspx
    Web Messenger: http://cutesoft.net/Web-Messenger/default.aspx
    asp.net wysiwyg editor: http://cutesoft.net/ASP.NET+WYSIWYG+Editor/default.aspx
    asp wysiwyg html editor: http://cutesoft.net/ASP
    asp.net Image Gallery: http://cutesoft.net/ASP.NET+Image+Gallery/default.aspx
    Live Support: http://cutesoft.net/live-support/default.aspx

  •  07-28-2006, 3:44 PM 21356 in reply to 21330

    Re: Using CuteEditor as a Simple TextBox Form Field

    Reply Quote
    Thanks for the reply Adam.  That gets me there partially.  It shows me how to limit the size and remove return key functionality.
     
    Am I also to assume then that to solve some of my other questions...
     - I can use the attachevent and detachevent javascript to attach an event for onblur?
     - I can write a javascript function to keep checking the available space in the textbox so I can add another row?
     (not sure how to check available space left, but I'll give it a shot)
     
    I am still lost on how to perform the following...
     - Make the CE box look identical to a normal textbox
     - Tie in an Ajax control to do a postback for the CE control (I understand how to tie in the javascript, but to tie in the callback portion of it is a little fuzzy)
     
    Thanks again for your help
    Jon

  •  08-09-2006, 5:34 PM 21713 in reply to 21356

    Re: Using CuteEditor as a Simple TextBox Form Field

    Reply Quote
    No one has gotten back to me on some of the questions I had.  How can I make the editor look like a normal text box without the thick border, make it the same color, and to remove all the extra space (margin) on the left of the text in the editor where I type?
     
    Thanks for the help.

  •  04-06-2007, 2:27 AM 28029 in reply to 21713

    Re: Using CuteEditor as a Simple TextBox Form Field

    Reply Quote
    Hi,
       I hope, it might help you to solve your probs..
       create a CssClass with required TextBox format.
    then call the cssClass name for the particular textBox
     
    Example:
    1.CssClaas:
     
    .textBox
    {
    border-width:1px;
    border-style:solid;
    }

    2.calling CssClass name

    <input class=textBox id=txtName name=Text1>
     

  •  04-06-2007, 2:46 AM 28030 in reply to 28029

    in cuteeditor How we accept the value of the textbox

    Reply Quote
    Hi Adam,
     
       I'm using the CuteEditor latest version.
     
    there is a TextBox name txtName as well a link to other page(email.aspx) in editor area.
     
    when we click the link the new page(email.aspx) has to call with passing the value of TextBox.
     
    when i do this, the new page opening is correct but the argument has not pass into the ne page.
     
    I used the follwing line into Editor area in cuteeditor
     
    <a href="email.aspx?EmailDetails=" & txtName.text target=_blank><img height=20 alt="Send Details" src="http://cutesoft.net/IRISH/uploads/IRISH/btnSend.gif" width=42 border=0></a>
     
    please help me to sortout this problem...
     
    thank you
View as RSS news feed in XML