Text Operations in Blazor Rich Text Editor
- 7 minutes to read
This section contains examples that demonstrate how to insert, get, format, and delete text in the Rich Text Editor.
Insert Text
Call a sub-document’s AddTextAsync method overload to insert text into an open document.
Insert Text into the Active Sub-Document
Use the @bind-Selection attribute to bind the Selection property to a data field and access the editor’s selection. The selection’s ActiveSubDocument and CaretPosition properties allow you to access the active sub-document and get the caret position.
<DxRichEdit @bind-Selection="@selection" @ref="@richEdit" />
@code {
DxRichEdit richEdit;
Selection selection;
@* ... *@
/* Surround the code that contains an asynchronous operation with a try-catch block to handle
the OperationCanceledException. This exception is thrown when an asynchronous operation is canceled. */
try {
@* ... *@
// Inserts text at the caret position
await selection.ActiveSubDocument.AddTextAsync(selection.CaretPosition, "Inserted Text");
// Inserts text at the beginning of the active sub-document
await selection.ActiveSubDocument.AddTextAsync(0, "Inserted Text");
// Appends text to the active sub-document
await selection.ActiveSubDocument.AddTextAsync("Inserted Text");
@* ... *@
}
catch (OperationCanceledException e) {
Console.WriteLine($"{nameof(OperationCanceledException)} thrown with message: {e.Message}");
}
}
Insert Text into the Main Sub-Document
Use the DocumentAPI property to access the main sub-document. Call its AddTextAsync method overload to insert text.
<DxRichEdit @ref="richEdit" />
@code {
DxRichEdit richEdit;
Document documentAPI;
@* ... *@
/* Surround the code that contains an asynchronous operation with a try-catch block to handle
the OperationCanceledException. This exception is thrown when an asynchronous operation is canceled. */
try {
documentAPI = richEdit.DocumentAPI;
// Inserts text at the beginning of the main sub-document
await documentAPI.AddTextAsync(0, "New Text");
// Appends text to the main sub-document
await documentAPI.AddTextAsync("New Text");
}
catch (OperationCanceledException e) {
Console.WriteLine($"{nameof(OperationCanceledException)} thrown with message: {e.Message}");
}
@* ... *@
}
Insert Text into a Header or Footer
Use the Sections property to access sections. Call the GetHeaderAsync or GetFooterAsync method to access a section’s header or footer. Call its AddTextAsync method overload to insert text.
<DxRichEdit @ref="richEdit" />
@code {
DxRichEdit richEdit;
Document documentAPI;
@* ... *@
/* Surround the code that contains an asynchronous operation with a try-catch block to handle
the OperationCanceledException. This exception is thrown when an asynchronous operation is canceled. */
try {
documentAPI = richEdit.DocumentAPI;
@* ... *@
// Accesses the first section
Section FirstSection = await documentAPI.Sections.GetAsync(0);
// Creates the section's header if it does not exist and accesses the header
var Header = await FirstSection.GetHeaderAsync(HeaderFooterType.Primary, true);
// Inserts text at the beginning of the header
await Header.AddTextAsync(0, "The beginning of the header.");
// Appends text to the header
await Header.AddTextAsync("The end of the header.");
// Creates the section's footer if it does not exist and accesses the footer
var Footer = await FirstSection.GetFooterAsync(HeaderFooterType.Primary, true);
// Inserts text at the beginning of the footer
await Footer.AddTextAsync(0, "The beginning of the footer.");
// Appends text to the footer
await Footer.AddTextAsync("The end of the footer.");
@* ... *@
}
catch (OperationCanceledException e) {
Console.WriteLine($"{nameof(OperationCanceledException)} thrown with message: {e.Message}");
}
}
Insert Text into a Paragraph
Use a sub-document’s Paragraphs property to access a particular paragraph. A paragraph’s Interval property allows you to obtain the interval that contains this paragraph. Use the interval Start and Length properties to calculate the insert position.
<DxRichEdit @ref="richEdit" />
@code {
DxRichEdit richEdit;
Document documentAPI;
@* ... *@
/* Surround the code that contains an asynchronous operation with a try-catch block to handle
the OperationCanceledException. This exception is thrown when an asynchronous operation is canceled. */
try {
documentAPI = richEdit.DocumentAPI;
@* ... *@
// Accesses the first paragraph
Paragraph FirstParagraph = await documentAPI.Paragraphs.GetAsync(0);
// Appends text to the paragraph
int Position = FirstParagraph.Interval.Start + FirstParagraph.Interval.Length - 1;
await documentAPI.AddTextAsync(Position, "The end of the paragraph");
// Inserts text at the beginning of the paragraph
await documentAPI.AddTextAsync(FirstParagraph.Interval.Start, "The beginning of the paragraph");
@* ... *@
}
catch (OperationCanceledException e) {
Console.WriteLine($"{nameof(OperationCanceledException)} thrown with message: {e.Message}");
}
}
Get Text
Call a sub-document’s GetTextSpanAsync method overload to get the sub-document’s text span. Use the span’s Text property to convert and get the span content as plain text.
Get the Entire Text of the Main Sub-Document
The DocumentAPI property allows you to access the main sub-document. The code sample below calls the GetTextSpanAsync(Int32, Int32, CancellationToken) method to get the sub-document’s text span.
<DxRichEdit @ref="richEdit" />
@code {
DxRichEdit richEdit;
Document documentAPI;
@* ... *@
/* Surround the code that contains an asynchronous operation with a try-catch block to handle
the OperationCanceledException. This exception is thrown when an asynchronous operation is canceled. */
try {
documentAPI = richEdit.DocumentAPI;
@* ... *@
// Gets the main sub-document's length that corresponds to the position of the last character in the last paragraph.
IReadOnlyList <Paragraph> allParagraphs = await documentAPI.Paragraphs.GetAllAsync();
Paragraph lastParagraph = allParagraphs.Last();
int mainSubDocumentLength = lastParagraph.Interval.Start + lastParagraph.Interval.Length;
// Gets the main sub-document's text
TextSpan textSpan = await documentAPI.GetTextSpanAsync(0, mainSubDocumentLength);
string mainSubDocumentText = textSpan.Text;
@* ... *@
}
catch (OperationCanceledException e) {
Console.WriteLine($"{nameof(OperationCanceledException)} thrown with message: {e.Message}");
}
}
Get the Selected Text
Use the @bind-Selection attribute to bind the Selection property to a data field and access the editor’s selection. Its ActiveSubDocument and Intervals properties allow you to access the active sub-document and the intervals that contain the selection.
<DxRichEdit @bind-Selection="@selection" @ref="@richEdit" />
@code {
DxRichEdit richEdit;
Selection selection;
@* ... *@
/* Surround the code that contains an asynchronous operation with a try-catch block to handle
the OperationCanceledException. This exception is thrown when an asynchronous operation is canceled. */
try {
@* ... *@
// Gets a textual representation of the first selected interval
SubDocument activeSubDocument = selection.ActiveSubDocument;
TextSpan firstSelectedTextSpan = await activeSubDocument.GetTextSpanAsync(selection.Intervals.First());
string selectedText = firstSelectedTextSpan.Text;
@* ... *@
}
catch (OperationCanceledException e) {
Console.WriteLine($"{nameof(OperationCanceledException)} thrown with message: {e.Message}");
}
}
Format Text
Use a sub-document’s AddTextAsync or GetTextSpanAsync method overload to get a text span and call its ChangePropertiesAsync method to customize character properties.
The example below demonstrates how to configure character properties of inserted text.
<DxRichEdit @ref="richEdit" />
@code {
DxRichEdit richEdit;
Document documentAPI;
@* ... *@
/* Surround the code that contains an asynchronous operation with a try-catch block to handle
the OperationCanceledException. This exception is thrown when an asynchronous operation is canceled. */
try {
documentAPI = richEdit.DocumentAPI;
TextSpan characters = await documentAPI.AddTextAsync("New Text");
@* ... *@
await characters.ChangePropertiesAsync(properties => {
properties.FontName = "Arial";
properties.FontSize = 16;
properties.Underline = true;
});
@* ... *@
}
catch (OperationCanceledException e) {
Console.WriteLine($"{nameof(OperationCanceledException)} thrown with message: {e.Message}");
}
}
Clear Formatting
The ChangeDefaultCharacterPropertiesAsync method allows you to change the document’s default character formatting. To reset character formatting in a sub-document or its interval to the default settings, call the sub-document’s ClearFormattingAsync method overload.
The example below configures the default character formatting and applies it to a document once the document is loaded in the Rich Text Editor:
<DxRichEdit DocumentLoaded=OnDocumentLoaded/>
@code {
async Task OnDocumentLoaded(Document document) {
await document.ChangeDefaultCharacterPropertiesAsync(properties => {
properties.FontName = "Times New Roman";
properties.FontSize = 12;
});
await document.ClearFormattingAsync();
}
}
Delete Text
Pass an interval to a sub-document’s RemoveAsync method overload to delete the interval’s content.
<DxRichEdit @ref="richEdit" />
@code {
DxRichEdit richEdit;
Document documentAPI;
@* ... *@
/* Surround the code that contains an asynchronous operation with a try-catch block to handle
the OperationCanceledException. This exception is thrown when an asynchronous operation is canceled. */
try {
documentAPI = richEdit.DocumentAPI;
@* ... *@
Paragraph firstParagraph = await documentAPI.Paragraphs.GetAsync(0);
@* ... *@
// Removes the first paragraph
await documentAPI.RemoveAsync(firstParagraph.Interval);
// Removes content located on the 5-15 positions of the main sub-document
await documentAPI.RemoveAsync(5, 10);
@* ... *@
}
catch (OperationCanceledException e) {
Console.WriteLine($"{nameof(OperationCanceledException)} thrown with message: {e.Message}");
}
}