aspnet-119386-components-rich-text-editor-examples-how-to-insert-text-to-the-end-of-the-document-on-the-client-side.md
The ASPxRichEdit control is shipped with the client API allowing you to manipulate with document content on the client side. The client API includes document API , selection API and client commands :
The document API provides resources for receiving the current information about document structural elements.
The selection API provides resources for positioning the cursor and select elements within a document.
The client commands provide resources to modify the document content.
This example demonstrates how to insert text to the end of the document on the client side. The ASPxRichEdit includes a custom ribbon button: clicks on this item are processed using the CustomCommandExecuted client event. The event handler identifies the custom item via a command name and includes client commands and the selection API to insert text.
<%@ 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 onRichEditCustomCommandExecuted(s, e) {
if(e.commandName = "AddSignature") {
RichEdit.selection.goToDocumentEnd();
RichEdit.commands.insertParagraph.execute();
RichEdit.commands.insertParagraph.execute();
RichEdit.commands.insertText.execute(TextBox.GetText());
RichEdit.commands.insertParagraph.execute();
RichEdit.commands.createDateField.execute()
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<dx:ASPxTextBox ID="TextBox" runat="server" Caption="Name" ClientInstanceName="TextBox" Text="John Smith"></dx:ASPxTextBox>
<dx:ASPxRichEdit ID="RichEdit" runat="server" ClientInstanceName="RichEdit">
<ClientSideEvents CustomCommandExecuted="onRichEditCustomCommandExecuted" />
<RibbonTabs>
<dx:RERHomeTab>
<Groups>
<dx:RibbonGroup Text="Signature">
<Items>
<dx:RibbonButtonItem Name="AddSignature" Text="Add Signature" Size="Large" LargeImage-IconID="edit_edit_32x32"></dx:RibbonButtonItem>
</Items>
</dx:RibbonGroup>
<dx:RibbonGroup Text="Printing">
<Items>
<dx:RERPrintCommand Size="Large"></dx:RERPrintCommand>
</Items>
</dx:RibbonGroup>
</Groups>
</dx:RERHomeTab>
</RibbonTabs>
</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();
for(int i = 0; i < 50; i++)
server.Document.AppendText("Some text. ");
server.SaveDocument(stream, DocumentFormat.OpenXml);
stream.Position = 0;
DocumentManager.CloseDocument(documentId);
RichEdit.Open(documentId, DocumentFormat.OpenXml, () => stream);
}
RichEdit.Focus();
}
}
}
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()
For i As Integer = 0 To 49
server_Renamed.Document.AppendText("Some text. ")
Next i
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
<%@ 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 onRichEditCustomCommandExecuted(s, e) {
if(e.commandName = "AddSignature") {
RichEdit.selection.goToDocumentEnd();
RichEdit.commands.insertParagraph.execute();
RichEdit.commands.insertParagraph.execute();
RichEdit.commands.insertText.execute(TextBox.GetText());
RichEdit.commands.insertParagraph.execute();
RichEdit.commands.createDateField.execute()
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<dx:ASPxTextBox ID="TextBox" runat="server" Caption="Name" ClientInstanceName="TextBox" Text="John Smith"></dx:ASPxTextBox>
<dx:ASPxRichEdit ID="RichEdit" runat="server" ClientInstanceName="RichEdit">
<ClientSideEvents CustomCommandExecuted="onRichEditCustomCommandExecuted" />
<RibbonTabs>
<dx:RERHomeTab>
<Groups>
<dx:RibbonGroup Text="Signature">
<Items>
<dx:RibbonButtonItem Name="AddSignature" Text="Add Signature" Size="Large" LargeImage-IconID="edit_edit_32x32"></dx:RibbonButtonItem>
</Items>
</dx:RibbonGroup>
<dx:RibbonGroup Text="Printing">
<Items>
<dx:RERPrintCommand Size="Large"></dx:RERPrintCommand>
</Items>
</dx:RibbonGroup>
</Groups>
</dx:RERHomeTab>
</RibbonTabs>
</dx:ASPxRichEdit>
</div>
</form>
</body>
</html>