Back to Devexpress

How to: Common Use Cases

aspnet-401601-components-rich-text-editor-examples-how-to-common-use-cases.md

latest6.7 KB
Original Source

How to: Common Use Cases

  • Feb 26, 2021
  • 3 minutes to read

This topic contains code samples that show how to use the ASPxRichEdit control.

Tip

For details on how to implement these cases in the ASP.NET Core Rich Text Editor control, see the following help topic: How to: Common Use Cases.

Insert text at the cursor position

javascript
richEdit.commands.insertText.execute('sometext');

Insert text at the end of the active sub-document

javascript
richEdit.selection.goToDocumentEnd();
richEdit.commands.insertText.execute("sometext");

Delete all text in the active sub-document

javascript
richEdit.selection.selectAll();
richEdit.commands.delete.execute();

Insert a picture at a specified position

javascript
var imageUrl = "https://demos.devexpress.com/ASPxImageAndDataNavigationDemos/Content/Images/landscapes/07.jpg";
richEdit.selection.intervals = [{ start: position, length: 0 }];
richEdit.commands.insertPicture.execute(imageUrl);

Get the main sub-document’s content length

javascript
var mainSubDocumentLength = richEdit.document.mainSubDocument.length;

Get the entire text of the main sub-document

javascript
var mainSubDocumentText = richEdit.document.mainSubDocument.text;

Get the selected text

javascript
var firstSelectedInterval = richEdit.selection.intervals[0];
var selectedText = richEdit.document.activeSubDocument.text.substr(firstSelectedInterval.start, firstSelectedInterval.length);

Get all fields in the main sub-document

javascript
var mainSubDocumentFields = richEdit.document.mainSubDocument.fieldsInfo;

Create a field at the cursor position

javascript
richEdit.commands.createField.execute('time');

Update all fields

javascript
richEdit.commands.updateAllFields.execute();

Create a header and populate it with text

javascript
richEdit.commands.insertHeader.execute();
richEdit.commands.insertText.execute("sometext");
richEdit.commands.closeHeaderFooter.execute();

Create a table at the specified position

javascript
richEdit.selection.intervals = [{ start: tblPosition, length: 0 }];
richEdit.commands.insertTable.execute(2, 3);

Scroll to a bookmark

javascript
richEdit.commands.goToBookmark.execute("bookmarkName");

Get a bookmark interval by its name

javascript
var bookmarkInterval = richEdit.document.mainSubDocument.findBookmarks('bookmark')[0].interval;

Scroll to the document end

javascript
richEdit.scroll.setByDocumentPosition(richEdit.document.mainSubDocument.length);
javascript
var fields = richEdit.document.mainSubDocument.fieldsInfo;
var hyperlinkUrls = [];
for(var i = 0; i < fields.length; i++) {
    var field = fields[i];
    if(field.isHyperlink && field.hyperlinkUri)
        hyperlinkUrls.push(field.hyperlinkUri);
}

Remove a field

javascript
var selection = richEdit.selection.intervals;
richEdit.selection.setSelection(richEdit.document.mainSubDocument.fieldsInfo[0].interval);
richEdit.commands.delete.execute();
richEdit.selection.intervals = selection;

Update all fields once the editor is shown

aspx
<dx:ASPxRichEdit ID="richEdit" runat="server" Width="100%" Height="700px">
    <ClientSideEvents DocumentLoaded="function(s, e) {s.commands.updateAllFields.execute();}" />
</dx:ASPxRichEdit>

Change the font size of the inserted text

aspx
<script type="text/javascript">
function onContentInserted(s, e) {
    var previousSelection = s.selection.intervals;
    s.commands.beginUpdate();
    s.selection.intervals = [e.interval];
    s.commands.changeFontSize.execute(10);
    s.selection.intervals = previousSelection;
    s.commands.endUpdate();
}
</script>

<dx:ASPxRichEdit ID="richEdit" runat="server" ClientInstanceName="richEdit">
    <ClientSideEvents ContentInserted="OnContentInserted"/>
</dx:ASPxRichEdit>

Create a server-side document’s model and pass it to the client model

aspx
<dx:ASPxButton runat="server" ID="InsertModel" Text="Insert Model">
    <ClientSideEvents Click="function(s, e) {richEdit.commands.insertContentFromServer.execute('model');}" />
</dx:ASPxButton>
<dx:ASPxRichEdit ID="richEdit" runat="server" ClientInstanceName="richEdit" 
    OnInsertContentToClient="ASPxRichEdit1_InsertContentToClient">
</dx:ASPxRichEdit>
csharp
protected void ASPxRichEdit1_InsertContentToClient(object sender, DevExpress.Web.ASPxRichEdit.InsertContentToClientEventArgs e) {
    if (e.RequestId == "model") {
        var docServer = new RichEditDocumentServer();
        var document = docServer.Document;

        document.AppendText("Model To Insert");
        DocumentRange myRange = document.Paragraphs[0].Range;
        CharacterProperties charProps = document.BeginUpdateCharacters(myRange);
        charProps.FontSize = 30;
        charProps.Bold = true;
        document.EndUpdateCharacters(charProps);
        e.Result = document;
    }
}
vb
Protected Sub ASPxRichEdit1_InsertContentToClient(ByVal sender As Object, ByVal e As DevExpress.Web.ASPxRichEdit.InsertContentToClientEventArgs)
    If e.RequestId = "model" Then
        Dim docServer = New RichEditDocumentServer()
        Dim document = docServer.Document
        document.AppendText("Model To Insert")
        Dim myRange As DocumentRange = document.Paragraphs(0).Range
        Dim charProps As CharacterProperties = document.BeginUpdateCharacters(myRange)
        charProps.FontSize = 30
        charProps.Bold = True
        document.EndUpdateCharacters(charProps)
        e.Result = document
    End If
End Sub