How to: Common Use Cases
- 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
Related members: InsertTextCommand.execute(text)
richEdit.commands.insertText.execute('sometext');
Insert text at the end of the active sub-document
Related members: goToDocumentEnd, InsertTextCommand.execute(text)
richEdit.selection.goToDocumentEnd();
richEdit.commands.insertText.execute("sometext");
Delete all text in the active sub-document
Related members: selectAll, DeleteCommand.execute
richEdit.selection.selectAll();
richEdit.commands.delete.execute();
Insert a picture at a specified position
Related members: intervals, InsertPictureCommand.execute(imageUrl)
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
Related members: mainSubDocument, length
var mainSubDocumentLength = richEdit.document.mainSubDocument.length;
Get the entire text of the main sub-document
Related members: mainSubDocument, text
var mainSubDocumentText = richEdit.document.mainSubDocument.text;
Get the selected text
Related members: intervals, activeSubDocument, text, start, length
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
Related members: mainSubDocument, fieldsInfo
var mainSubDocumentFields = richEdit.document.mainSubDocument.fieldsInfo;
Create a field at the cursor position
Related members: CreateFieldCommand.execute
richEdit.commands.createField.execute('time');
Update all fields
Related members: UpdateAllFieldsCommand.execute
richEdit.commands.updateAllFields.execute();
Create a header and populate it with text
Related members: InsertHeaderCommand.execute, InsertTextCommand.execute(text), CloseHeaderFooterCommand.execute
richEdit.commands.insertHeader.execute();
richEdit.commands.insertText.execute("sometext");
richEdit.commands.closeHeaderFooter.execute();
Create a table at the specified position
Related members: intervals, InsertTableCommand.execute(columnCount,rowCount)
richEdit.selection.intervals = [{ start: tblPosition, length: 0 }];
richEdit.commands.insertTable.execute(2, 3);
Scroll to a bookmark
Related members: GoToBookmarkCommand.execute(name)
richEdit.commands.goToBookmark.execute("bookmarkName");
Get a bookmark interval by its name
Related members: mainSubDocument, findBookmarks(arg)
var bookmarkInterval = richEdit.document.mainSubDocument.findBookmarks('bookmark')[0].interval;
Scroll to the document end
Related members: setByDocumentPosition(position), mainSubDocument, length
richEdit.scroll.setByDocumentPosition(richEdit.document.mainSubDocument.length);
Get URLs of all hyperlinks in the main sub-document
Related members: mainSubDocument, fieldsInfo, Field
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
Related members: intervals, setSelection(arg), mainSubDocument, fieldsInfo, DeleteCommand.execute
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
Related members: DocumentLoaded, UpdateAllFieldsCommand.execute
<dx:ASPxRichEdit ID="DemoRichEdit" runat="server" Width="100%" Height="700px">
<ClientSideEvents DocumentLoaded="function(s, e) {s.commands.updateAllFields.execute();}" />
</dx:ASPxRichEdit>
Create a server-side document’s model and pass it to the client model
Related members: InsertContentFromServerCommand.execute, InsertContentToClient
<dx:ASPxButton runat="server" ID="InsertModel" Text="Insert Model">
<ClientSideEvents Click="function(s, e) {richEdit.commands.insertContentFromServer.execute('model');}" />
</dx:ASPxButton>
<dx:ASPxRichEdit ID="DemoRichEdit" runat="server" ClientInstanceName="richEdit"
OnInsertContentToClient="ASPxRichEdit1_InsertContentToClient">
</dx:ASPxRichEdit>
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;
}
}