How to: Get a selected text on the client side

Aug 01, 2019
3 minutes to read

This example demonstrates how to get selected text on the client side. The ASPxRichEdit client-side API provides the selection property that allows you to select a text range in code or obtain the selected range’s Interval object. This object can be used to receive the selected text: all text is stored within sub-documents, following the ASPxRichEdit document model structure. Thus, get an active sub-document using the client-side document property and use the text array to access the selected text range. If you need to receive all text in the active sub-document, you can get the entire text array.

Note

A complete sample project is available at https://github.com/DevExpress-Examples/aspxrichedit-how-to-get-a-selected-text-on-the-client-side-t449266

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register assembly="DevExpress.Web.ASPxRichEdit.v16.1, Version=16.1.6.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web.ASPxRichEdit" tagprefix="dx" %>
<%@ Register assembly="DevExpress.Web.v16.1, Version=16.1.6.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web" tagprefix="dx" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function getAllText() {
            return RichEdit.document.activeSubDocument.text;
        }
        function getSelectedText() {
            var firstSelectedInterval = RichEdit.selection.intervals[0];
            var selectedText = RichEdit.document.activeSubDocument.text.substr(firstSelectedInterval.start, firstSelectedInterval.length);
            return selectedText;
        }
        function selectFirstLine() {
            return RichEdit.selection.selectLine();
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div style="padding-bottom: 10px;">
            <dx:ASPxButton runat="server" ID="Button1" Text="Get All Text" AutoPostBack="false">
                <ClientSideEvents Click="function(s, e) { alert(getAllText()); }" />
            </dx:ASPxButton>
            <dx:ASPxButton runat="server" ID="Button2" Text="Get Selected Text" AutoPostBack="false">
                <ClientSideEvents Click="function(s, e) { alert(getSelectedText()); }" />
            </dx:ASPxButton>
       </div>

        <dx:ASPxRichEdit ID="RichEdit" runat="server" ClientInstanceName="RichEdit">
            <ClientSideEvents Init="function(s, e) { selectFirstLine(); }" />
        </dx:ASPxRichEdit>
    </div>
    </form>
</body>
</html>

using DevExpress.Web.Office;
using DevExpress.XtraRichEdit;
using System;
using System.IO;

public partial class _Default : System.Web.UI.Page {
    string documentId = "docId";

    protected void Page_Load(object sender, EventArgs e) {
        if(!IsPostBack) {
            using(MemoryStream stream = new MemoryStream()) {
                RichEditDocumentServer server = new RichEditDocumentServer();
                server.CreateNewDocument();
                server.Document.AppendText("Hello world!");
                server.Document.Paragraphs.Append();
                server.Document.AppendText("Some text...");
                server.SaveDocument(stream, DocumentFormat.OpenXml);
                stream.Position = 0;
                DocumentManager.CloseDocument(documentId);
                RichEdit.Open(documentId, DocumentFormat.OpenXml, () => stream);
            }
            RichEdit.Focus();
        }
    }
}

<%@ Page Language="vb" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<%@ Register assembly="DevExpress.Web.ASPxRichEdit.v16.1, Version=16.1.6.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web.ASPxRichEdit" tagprefix="dx" %>
<%@ Register assembly="DevExpress.Web.v16.1, Version=16.1.6.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web" tagprefix="dx" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function getAllText() {
            return RichEdit.document.activeSubDocument.text;
        }
        function getSelectedText() {
            var firstSelectedInterval = RichEdit.selection.intervals[0];
            var selectedText = RichEdit.document.activeSubDocument.text.substr(firstSelectedInterval.start, firstSelectedInterval.length);
            return selectedText;
        }
        function selectFirstLine() {
            return RichEdit.selection.selectLine();
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div style="padding-bottom: 10px;">
            <dx:ASPxButton runat="server" ID="Button1" Text="Get All Text" AutoPostBack="false">
                <ClientSideEvents Click="function(s, e) { alert(getAllText()); }" />
            </dx:ASPxButton>
            <dx:ASPxButton runat="server" ID="Button2" Text="Get Selected Text" AutoPostBack="false">
                <ClientSideEvents Click="function(s, e) { alert(getSelectedText()); }" />
            </dx:ASPxButton>
       </div>

        <dx:ASPxRichEdit ID="RichEdit" runat="server" ClientInstanceName="RichEdit">
            <ClientSideEvents Init="function(s, e) { selectFirstLine(); }" />
        </dx:ASPxRichEdit>
    </div>
    </form>
</body>
</html>

Imports DevExpress.Web.Office
Imports DevExpress.XtraRichEdit
Imports System
Imports System.IO

Partial Public Class _Default
    Inherits System.Web.UI.Page

    Private documentId As String = "docId"

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
        If Not IsPostBack Then
            Using stream As New MemoryStream()

                Dim server_Renamed As New RichEditDocumentServer()
                server_Renamed.CreateNewDocument()
                server_Renamed.Document.AppendText("Hello world!")
                server_Renamed.Document.Paragraphs.Append()
                server_Renamed.Document.AppendText("Some text...")
                server_Renamed.SaveDocument(stream, DocumentFormat.OpenXml)
                stream.Position = 0
                DocumentManager.CloseDocument(documentId)
                RichEdit.Open(documentId, DocumentFormat.OpenXml, Function() stream)
            End Using
            RichEdit.Focus()
        End If
    End Sub
End Class

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode