ASP.NET Core Blazor [Preview]
Search results

Getting Started for ASP.NET Core Razor RichTextEditor in Visual Studio 2019

The section explains step-by-step process to create a RichTextEditor in ASP.NET Core Razor with building and publishing using Visual Studio 2019.

Setup the application

Follow the steps, which is given in the Getting started page to setup the application and render the ASP.NET Core Razor components.

Initialize the ASP.NET Core Razor RichTextEditor component

Initialize the Essential JS 2 RichTextEditor component in any web page (razor) in the Pages folder. For example, the RichTextEditor component is added in the ~/Pages/Index.razor page.

The following code explains how to initialize a simple RichTextEditor in ASP.NET Razor page.

@using Syncfusion.EJ2.RazorComponents
@using Syncfusion.EJ2.RazorComponents.RichTextEditor

<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">
            <EjsRichTextEditor id="defaultRte" value="@value" showCharCount="@charCount">
                <RichTextEditorToolbarSettings Items="@tools"></RichTextEditorToolbarSettings>

@functions {
    private bool charCount { get; set; } = true;
    private string value { get; set; } = @"<p>RichTextEditor allows to insert images from online source as well as local computer where you want to insert the image in your content.</p><p><b>Get started Quick Toolbar to click on the image</b></p><p>It is possible to add custom style on the selected image inside the RichTextEditor through quick toolbar.</p><img alt='Logo' style='width: 300px; height: 300px; transform: rotate(0deg);' src='' />";
    public static object[] tools = new object[]{
            "Bold", "Italic", "Underline", "StrikeThrough",
            "FontName", "FontSize", "FontColor", "BackgroundColor",
            "LowerCase", "UpperCase", "|",
            "Formats", "Alignments", "OrderedList", "UnorderedList",
            "Outdent", "Indent", "|", "CreateTable",
            "CreateLink", "Image", "|", "ClearFormat", "Print",
            "SourceCode", "FullScreen", "|", "Undo", "Redo"

Run the application

After successful compilation of your application, press F5 to run the application.

Output be like the below.

RichTextEditor overview