Search results

Getting Started

This section briefly explains how to include a RichTextEditor component in your Blazor client-side application. You can refer Getting Started with Syncfusion Blazor for Client-Side in Visual Studio 2019 Preview page for the introduction and configuring the common specifications.

Importing Syncfusion Blazor component in the application

  • Install Syncfusion.EJ2.Blazor NuGet package to the application by using the NuGet Package Manager. Check the Include prerelease option.
  • You can add the client-side resources through CDN or local npm package in the <head> element of the ~/wwwroot/index.html page.
<head>
    <environment include="Development">
        <link href="https://cdn.syncfusion.com/ej2/17.3.29/material.css" rel="stylesheet" />
        <script src="https://cdn.syncfusion.com/ej2/17.3.29/dist/ej2.min.js"></script>
     </environment>
</head>

Initialize the Blazor RichTextEditor component

Initialize the Blazor 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 Razor page.

@using Syncfusion.EJ2.Blazor
@using Syncfusion.EJ2.Blazor.RichTextEditor

<EjsRichTextEditor>
    <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>
</EjsRichTextEditor>

Run the application

After successful compilation of your application, run the application.

The output will be as follows.

output

Configure the Toolbar

Configure the toolbar with the tools using Items field of the RichTextEditorToolbarSettings property as your application requires.

@using Syncfusion.EJ2.Blazor
@using Syncfusion.EJ2.Blazor.RichTextEditor

<EjsRichTextEditor>
    <RichTextEditorToolbarSettings Items="@Tools"></RichTextEditorToolbarSettings>
    <p>The RichTextEditor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.</p>
    <p><b> Key features:</b></p>
    <ul>
    <li><p> Provides <b>IFRAME</b> and <b>DIV</b> modes </p></li>
    <li><p> Capable of handling markdown editing.</p></li>
    <li><p> Contains a modular library to load the necessary functionality on demand.</p></li>
    <li><p> Provides a fully customizable toolbar.</p></li>
    <li><p> Provides HTML view to edit the source directly for developers.</p></li>
    <li><p> Supports third - party library integration.</p></li>
    <li><p> Allows preview of modified content before saving it.</p></li>
    </ul>
</EjsRichTextEditor>

@code {
    public object[] Tools = new object[]{
        "Bold", "Italic", "Underline", "SubScript", "SuperScript", "StrikeThrough",
        "FontName", "FontSize", "FontColor", "BackgroundColor",
        "LowerCase", "UpperCase", "|",
        "Formats", "Alignments", "OrderedList", "UnorderedList",
        "Outdent", "Indent", "|", "CreateTable",
        "CreateLink", "Image", "|", "ClearFormat", "Print",
        "SourceCode", "FullScreen", "|", "Undo", "Redo"
    };
}

The output will be as follows.

Toolbar

The Image module inserts an image into RichTextEditor’s content area, and the Link module links external resources such as website URLs to the selected text in the RichTextEditor’s content respectively.

The link inject module adds a link icon to the toolbar and the image inject module adds an image icon to the toolbar.

Specifies the items to be rendered in quick toolbar based on the target elements such as image, link and text element. The quick toolbar opens to customize the element by clicking the target element.

@using Syncfusion.EJ2.Blazor
@using Syncfusion.EJ2.Blazor.RichTextEditor

<EjsRichTextEditor>
    <RichtexteditorQuickToolbarSettings Image="@Image" Link="@Link"></RichtexteditorQuickToolbarSettings>
    <RichTextEditorToolbarSettings Items="@Tools"></RichTextEditorToolbarSettings>
    <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='https://ej2.syncfusion.com/aspnet-core-blazor/images/RichTextEditor/RTEImage-Feather.png' />
</EjsRichTextEditor>

@code {
    public object[] Tools = new object[] {
        "Bold", "Italic", "Underline", "|",
        "Formats", "Alignments", "|", "CreateLink", "Image", "|","SourceCode", "|", "Undo", "Redo"
    };

    public object[] Image = new object[] {
        "Replace", "Align", "Caption", "Remove", "InsertLink", "OpenImageLink", "-",
        "EditImageLink", "RemoveImageLink", "Display", "AltText", "Dimension"
    };

    public object[] Link = new object[] {
        "Open", "Edit", "UnLink"
    };
}

The output will be as follows.

Image

Retrieve the formatted content

To retrieve the editor contents, use the Value property of RichTextEditor. Or, you can use the public method, GetHtml to retrieve the RichTextEditor content. To fetch the RichTextEditor’s text content, use GetText method of RichTextEditor.

@using Syncfusion.EJ2.Blazor
@using Syncfusion.EJ2.Blazor.RichTextEditor
@using Syncfusion.EJ2.Blazor.Buttons

<EjsButton @onclick="@GetValue">Get Value</EjsButton>
<EjsButton @onclick="@GetHtml">Get Html</EjsButton>
<EjsButton @onclick="@GetText">Get Text</EjsButton>

<EjsRichTextEditor @ref="RteObj" Value="@RteValue">
    <RichTextEditorToolbarSettings Items="@Tools"></RichTextEditorToolbarSettings>
</EjsRichTextEditor>

@code {
    EjsRichTextEditor RteObj;

    public string RteValue = @"<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='https://ej2.syncfusion.com/aspnet-core-blazor/images/RichTextEditor/RTEImage-Feather.png' />";
    public object[] Tools = new object[] {
        "Bold", "Italic", "Underline", "|",
        "Formats", "Alignments", "|", "CreateLink", "Image", "|","SourceCode", "|", "Undo", "Redo"
    };
    public void GetValue()
    {
        string Value = this.RteValue;
    }
    public async void GetHtml()
    {
        string GetHtml = await this.RteObj.GetHtml();
    }
    public async void GetText()
    {
        string GetText = await this.RteObj.GetText();
    }
}

See Also