Highlight specific word in Rad Editor

2 posts, 0 answers
  1. A
    A avatar
    1 posts
    Member since:
    Feb 2014

    Posted 03 Nov 2014 Link to this post

    Hi ,

    I didn't find any method in Radeditor control to Find a particular word and highlight it.Please throw me any suggestions how can i achieve this ?

    Thanks.
  2. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 06 Nov 2014 Link to this post

    Hi,

    If you are looking for server-side method to do that, there is none that OOB will enable you to search and highlight a specific word.

    Note that the RadEditor is an XHTML editor and has the ability to select DOM elements in the content area using the client-side selectElement() method.

    For example:
    <telerik:RadEditor ID="RadEditor1" runat="server">
        <Content>
            <p>some text</p>
            <p id="paragraphToSelect">paragraph to select</p>
            <p>some more text</p>
        </Content>
    </telerik:RadEditor>
     
    <telerik:RadButton runat="server" ID="RadButton1" AutoPostBack="false" OnClientClicked="OnClientClicked">
    </telerik:RadButton>
     
    <script type="text/javascript">
        function OnClientClicked(sender, args) {
            var $ = jQuery = $telerik.$; // This is needed if there is no jQuery referenced directly in the page.
            var editor = $find("<%= RadEditor1.ClientID %>");
            var contentBody = editor.get_contentArea();
            var elmToSelect = $(contentBody).find("#paragraphToSelect")[0];
     
            editor.selectElement(elmToSelect);
        }
    </script>

    Another approach is using the range objects, although creating a proper range is complex and the best approach is to firstly get one and reuse it if needed. You can refer to this help article about the Range.

    Alternative approach is to use directly browser functionality to search in content area. This approach is the most complex one and to further examine it I recomend directly investigating how the Find and Replace dialog is created by getting the FindAndReplace.ascx file from the installation folder of the installed controls (C:\Program Files (x86)\Telerik\UI for ASP.NET AJAX QX YYYY\EditorDialogs).

    Regards,
    Ianko
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top