Key Features

The purpose of this help article is to show you the key features of the RadRichTextEditor control.

HTML Source options

RichTextEditor exposes Source property of type RichTextSource used to load HTML content into the editor from a string as well as from a stream.

You can directly assign a string (containing HTML) as a Source of the editor - RadRichTextEditor will properly display the HTML content through the implemented in RichTextSource implicit converter. Check a simple example on this below:

this.richTextEditor.Source = "<b>Hello World!</b>";

Load HTML from a string

You can easily load the HTML content from a string by using the static FromString method of the RichTextSource class and assigning the result to the Source property of RadRichTextEditor:

var htmlSource = @"<h4>One of the Most Beautiful Islands on Earth - Tenerife</h4>
            <p><strong>Tenerife</strong> is the largest and most populated island of the eight <a href='https://en.wikipedia.org/wiki/Canary_Islands' target='_blank'>Canary Islands</a>.</p>
            <p style='color:#808080'>It is also the most populated island of <strong>Spain</strong>, with a land area of <i>2,034.38 square kilometers</i> and <i>904,713</i> inhabitants, 43% of the total population of the <strong>Canary Islands</strong>.</p>";
this.richTextEditor.Source = RichTextSource.FromString(htmlSource);

Alternatively, you can create a RichTextHtmlStringSource object and assign it to the Source property of the RichTextEditor.

Load HTML from a stream

Another option to preload HTML is by retrieving it from a stream through the static FromStream method of the RichTextSource and again, assign the result to the Source property of the RichTextEditor:

Func<CancellationToken, Task<Stream>> streamFunc = ct => Task.Run(() =>
{
    Assembly assembly = typeof(KeyFeatures).Assembly;
    string fileName = assembly.GetManifestResourceNames().FirstOrDefault(n => n.Contains("richtexteditor-htmlsource.html"));
    Stream stream = assembly.GetManifestResourceStream(fileName);
    return stream;
});

this.richTextEditor.Source = RichTextSource.FromStream(streamFunc);

Alternatively, you can create a RichTextHtmlStreamSource object and set it as the Source of the RichTextEditor.

Retrieving HTML Content

Through GetHtmlAsync method of RadRichTextEditor you can obtain the created and updated inside the editor HTML content:

var htmlString = await this.richTextEditor.GetHtmlAsync();

RichText Editing Capabilities

RichTextEditor will help app users create and edit HTML content. You can apply provided by RichTextEditor editing features through the built-in UI, namely RadRichTextEditorToolbar, or you can create custom UI and manually execute the RadRichTextEditor Commands.

In addition, RichTextEditor provides flexible API to apply formatting at the current caret position or on the selected text inside the editing area.

  • TextFormatting (of type RichTextFormatting): Defines the text formatting, such as heading, paragraph or of the text at the current position or selection.

  • TextColor: Specifies the color of the text at the current position or selection;

  • HighlightTextColor: Defines the text background color at the current position or selection;

  • SelectionRange (of type RichTextSelectionRange): Specifies the start and end position of the currently selected inside the editor text.

  • FontSize: Sets the font size of the text at the current caret position or selection;

  • FontAttributes (of type RichTextFontAttributes): Defines the font attributes, such as bold, italic, subscript and superscript at the current position or selection;

  • TextDecorations (of type RichTextDecorations): Specifies text decorations, such as underline and strikethrough at the current position or selection;

  • HorizontalTextAlignment (of type RichTextHorizontalAlignment): Specifies the text alignment, such as left, right, center or justify at the current position or selection;

  • ListType (of type RichTextListType): Specifies the list type, such as numbered or bulleted list at the current position or selection.

You can take advantage of the following methods related to hyperlinks and selection:

  • GetHyperlinkAsync() - returns asynchronously a RichTextHyperlink under the caret in the editor (or null in case there is no hyperlink). The RichTextHyperlink object contains the Url and Title of the link;

  • GetSelectionAsync() - returns asynchronously a RichTextSelection object which defines the current text selection inside the editor (null if there is no text selection). The RichTextSelection object contains the Text itself as well as the Start and End position of the text characters;

See Also

In this article
Not finding the help you need? Improve this article