Highlight certain words with JavaScript

Last post 08-18-2009, 9:33 AM by analysis_junky. 6 replies.
Sort Posts: Previous Next
  •  06-03-2009, 12:04 PM 52772

    Highlight certain words with JavaScript

    Hi,
     
    I hope there is a solution to my problem.
    One of the major uses of CuteEditor for me is a "Data Aware" email template editor. The "data aware fields" are defined by {field_name}.
     
    I would like for the editor to behavior similar to Crystal Reports in that when a field is clicked, the entire field is highlighted, which prevents the user from directly editing the field's text. (The fields are added by clicking anywhere in the body then selecting the appropriate field from a listbox).
     
    I need to be able to 
     
    1. Get the line text of the selected line, and carat position
    2. Determine if the click was inside a field (I should be able to do this using regex once I get the line text, and carat position)
    3. If so, highlight the entire field
     
    I would like to do all of this in JavaScript
     
    Sample text
    ______________________________________
    Dear {Recipient_Name}:

    Receipt of this letter confirms your registration for the upcoming {company} dinner meeting: “{Meeting_Title}” and “{Meeting_Description}”. Details as follows:

    {start_date_Long}
     
    {venue_name}
    {venue_address1}
    {venue_city}, {venue_state} {venue_zip}
    {venue_phone}

    Speaker: {Speaker_Name}, {Speaker_Credential}
    ...
    ______________________________________
     

     
     
  •  06-03-2009, 3:01 PM 52778 in reply to 52772

    Re: Highlight certain words with JavaScript

    analysis_junky:
    Hi,
     
    I hope there is a solution to my problem.
    One of the major uses of CuteEditor for me is a "Data Aware" email template editor. The "data aware fields" are defined by {field_name}.
     
    I would like for the editor to behavior similar to Crystal Reports in that when a field is clicked, the entire field is highlighted, which prevents the user from directly editing the field's text. (The fields are added by clicking anywhere in the body then selecting the appropriate field from a listbox).
     
    I need to be able to 
     
    1. Get the line text of the selected line, and carat position
    2. Determine if the click was inside a field (I should be able to do this using regex once I get the line text, and carat position)
    3. If so, highlight the entire field
     
    I would like to do all of this in JavaScript
     
    Sample text
    ______________________________________
    Dear {Recipient_Name}:

    Receipt of this letter confirms your registration for the upcoming {company} dinner meeting: “{Meeting_Title}” and “{Meeting_Description}”. Details as follows:

    {start_date_Long}
     
    {venue_name}
    {venue_address1}
    {venue_city}, {venue_state} {venue_zip}
    {venue_phone}

    Speaker: {Speaker_Name}, {Speaker_Credential}
    ...
    ______________________________________
     

     
     
     
    Please Creates your own HTML Filter to handle this issue.
     

    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

  •  06-04-2009, 7:18 AM 52786 in reply to 52778

    Re: Highlight certain words with JavaScript

    Adam, thanks for your reply - however that's not what I need. I think you misunderstood my question.
     
    I handle the replacing before emails are sent, which is done maybe months after the email has been constructed...
     
    What I need is something to assist the user while constructing the email.
     
    The user might want to change the field {start_date_Long} to {start_date_short}. 
    What needs to happen when the user clicks within the {start_date_Long} field is the entire field must be selected, thus preventing the user from manually editing the field text, which could lead to errors.
     
    Consider the following:
    {start_date_short} manually edited could end up being {start_date_shhort} because of human error.
     
  •  06-05-2009, 7:54 AM 52819 in reply to 52799

    Re: Highlight certain words with JavaScript

    Sweet!
     
    In addition to that, this is what I had to do...
     
    On client init, 
     
    //Allows for the ATOMICSELECTION Attribute to be used, which selects the element as a single unit
    //http://msdn.microsoft.com/en-us/library/ms537835(VS.85).aspx
    document.IDM_ATOMICSELECTION = true;
     
     
    When the user wants to add a field,
     
     html = "<div ATOMICSELECTION='true' UNSELECTABLE='OFF' contenteditable='false'>" + field+ "</div>";
    this.CE_EmailBody.PasteHTML(html);     

     
    Using the  IDM_ATOMICSELECTION property only works in IE unfortunately...
     
    Thanks for your help!
  •  08-17-2009, 12:03 PM 54742 in reply to 52819

    Re: Highlight certain words with JavaScript

    I have been working on a better solution. The problem with the above method was the behavior was drastically different in each browser.
     
    I have created a pure JavaScript solution that works cross browser within a TextArea.
     
    How can I get a handle of the TextArea within the CuteEditor? 
     
     
  •  08-18-2009, 9:33 AM 54761 in reply to 54742

    Re: Highlight certain words with JavaScript

    I finally figured this out!
     
     
    1. var editor1=document.getElementById('<%=Editor1.ClientID%>');  
    2. if(editor1.IsReady)CuteEditor_OnInitialized(editor);  
    3.   
    4.    function selectKeyWord(editor, elementType, keywordStartChar, keywordEndChar) {  
    5.        var span = editor.SearchSelectionElement(elementType);  
    6.        var v = span.innerHTML;  
    7.        if(v.indexOf(keywordStartChar) > -1 && v.indexOf(keywordEndChar) > -1) {  
    8.            editor1.SelectElement(span);  
    9.        }  
    10.    }  
    11.   
    12.    function CuteEditor_attachEvents() {  
    13.     //Get the editor content    
    14.     var editdoc = editor1.GetDocument();   
    15.   
    16.     // attach Events  
    17.     if(editdoc.attachEvent) {  
    18.         editdoc.attachEvent('onclick', CuteEditor_OnClick);  
    19.        }  
    20.     else if(editdoc.addEventListener) {  
    21.         editdoc.addEventListener('click', CuteEditor_OnClick, true);  
    22.        }  
    23. }             
    24.   
    25. function CuteEditor_detachEvents() {  
    26.     //Get the editor content    
    27.     var editdoc=editor1.GetDocument();   
    28.   
    29.     // detach Events  
    30.     if(editdoc.detachEvent) {  
    31.         editdoc.detachEvent('onclick', CuteEditor_OnClick);  
    32.        }  
    33.     else if(editdoc.removeEventListener) {  
    34.         editdoc.removeEventListener('click', CuteEditor_OnClick, true);  
    35.        }  
    36. }  
    37. function CuteEditor_OnClick() {  
    38.     selectKeyWord(editor1, 'SPAN''{''}')  
    39. }  
    40.           
    41. function CuteEditor_OnInitialized(editor) {  
    42.     CuteEditor_attachEvents();  

     
View as RSS news feed in XML