Style and Appearance

16 Oct 20246 minutes to read

Set placeholder

The Placeholder property is used to create a placeholder for the Rich Text Editor’s content when the editor body is empty. 

Use the e-rte-placeholder class to define the custom font family, font color, and styles to the placeholder text.

.e-richtexteditor .e-rte-placeholder {
    font-family: monospace;
}

RAZOR

@using Syncfusion.Blazor.RichTextEditor

<SfRichTextEditor Placeholder="Type something" />

<style>
    .e-richtexteditor .e-rte-placeholder {
        font-family: monospace;
    }
</style>

Source code view

The Rich Text Editor allows you to directly edit HTML code via Source View in the text area. If you make any direct modifications in the source view, the changes will be reflected in the editor content. So, you will have more flexibility over the content they have created.

RAZOR

@using Syncfusion.Blazor.RichTextEditor

<SfRichTextEditor>
    <p>The Rich Text Editor component is the WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update content. Format your 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>
    </ul>
</SfRichTextEditor>

Customizing editor content

Use the following CSS to customize the default Rich Text Editor’s content properties like font-family, font-size and color.

/* To change font family and font size */
.e-richtexteditor .e-rte-content .e-content,
.e-richtexteditor .e-source-content .e-content {
    font-size: 20px;
    font-family: Segoe ui;
}

/* To change font color and content background */
.e-richtexteditor .e-rte-content,
.e-richtexteditor .e-source-content {
    background: seashell;
    color: blue;
}

Customizing editor toolbar

Use the following CSS to customize the default color of the Rich Text Editor’s toolbar icon.

/* To change font color for toolbar icon */
.e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-icons,
.e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-icons:active {
    color: red;
}

/* To change font color for toolbar button */
.e-toolbar .e-tbar-btn,
.e-toolbar .e-tbar-btn:active,
.e-toolbar .e-tbar-btn:hover {
    color: red;
}

/* To change font color for toolbar button in active state*/
.e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-dropdown-btn.e-active .e-icons,
.e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-dropdown-btn.e-active .e-rte-dropdown-btn-text {
    color: red;
}

/* To change font color for expanded toolbar items */
.e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn .e-icons,
.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn {
    color: red;
}

Refresh editor

While rendering the Rich Text Editor inside the dialog component, the dialog container and its wrapper elements are styled with display: none, so the editor’s toolbar does not get the proper offset width and will render above the edit area container. To resolve this issue, call the RefreshUI method of the RichTextEditor in the dialog’s opened event.

RAZOR

@using Syncfusion.Blazor.RichTextEditor
@using Syncfusion.Blazor.Popups
@using Syncfusion.Blazor.Buttons

<SfButton @onclick="@OpenDialog">Open Dialog</SfButton>
<SfDialog @ref="DialogObj" Width="450px" ShowCloseIcon="true">
    <DialogEvents Opened="@DialogOpen"></DialogEvents>
    <DialogTemplates>
        <Header>
            <div>Dialog Header</div>
        </Header>
        <Content>
            <SfRichTextEditor @ref="RteObj">
            </SfRichTextEditor>
        </Content>
    </DialogTemplates>
</SfDialog>

@code {
    SfDialog DialogObj;
    SfRichTextEditor RteObj;
    private void OpenDialog()
    {
        this.DialogObj.ShowAsync();
    }
    private void DialogOpen()
    {
        this.RteObj.RefreshUI();
    }
}

Highlight the specific lines

Programmatically highlight a portion of the text in the editor, like setting the background color of the text by applying background style to the particular text using the RichTextEditor ExecuteCommand method and the jsinterop method.

Refer the jsintrob method in the <head> wwwroot/jsinterop.js of the file.

~/_jsinterop.js

window.RichTextEditor = {
    setBackground: function () {
        var rteInstance = document.getElementById('defaultRTE').blazor__instance;
        rteInstance.formatter.editorManager.nodeSelection.setSelectionText(
            document, rteInstance.inputElement.childNodes[0].childNodes[0], rteInstance.inputElement.childNodes[0].childNodes[0], 9, 20);
        return true;
    }
}

Refer script in the <head> of the ~/Pages/_Host.cshtml file.

~/-Host.cshtml

<head> 
        … 
        … 
        <script src="jsinterop.js"></script> 
</head>

Now, add the Syncfusion RichTextEditor component in the razor file. The RichTextEditor component is added in the ~/Pages/Index.razor file under the ~/Pages folder.

~/Index.Razor

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

<SfButton OnClick="SetBackround">Apply</SfButton>
<SfRichTextEditor @ref="@RteObj" ID="defaultRTE" Placeholder="Enter Some Content">
    <p>The Rich Text Editor component is the WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update content. Users can format their content using standard toolbar commands.</p>
</SfRichTextEditor>

@code {

    SfRichTextEditor RteObj;

    [Inject]
    IJSRuntime JsRuntime { get; set; }

    private async Task SetBackround()
    {
        await JsRuntime.InvokeAsync<bool>("RichTextEditor.setBackground");
        await this.RteObj.ExecuteCommandAsync(CommandName.BackgroundColor, "yellow");
    }
}

NOTE

Refer to the Blazor Rich Text Editor feature tour page for its groundbreaking feature representations. Also, explore Blazor Rich Text Editor example to know how to render and configure the rich text editor tools.