We're sorry. We cannot find any matches for your search term.

Example of Overview in Blazor Rich Text Editor Component

Rich Text Editor / Overview

This sample demonstrates the full features of Rich Text Editor that includes all the tools and functionalities.

Welcome to the Syncfusion Rich Text Editor

The Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.

Do you know the key features of the editor?

Basic features include headings, block quotes, numbered lists, bullet lists, and support to insert images, tables, audio, and video.
Inline styles include bold, italic, underline, strikethrough, hyperlinks,InlineCode and more.
The toolbar has multi-row, expandable, and scrollable modes. The Editor supports an inline toolbar, a floating toolbar, and custom toolbar items.
Integration with Syncfusion Mention control lets users tag other users. To learn more, check out the documentation and demos.
Paste from MS Word - helps to reduce the effort while converting the Microsoft Word content to HTML format with format and styles. To learn more, check out the documentation here.
Other features: placeholder text, character count, form validation, enter key configuration, resizable editor, IFrame rendering, tooltip, source code view, RTL mode, persistence, HTML Sanitizer, autosave, and more.

Easily access Audio, Image, Link, Video, and Table operations through the quick toolbar by right-clicking on the corresponding element with your mouse.

Unlock the Power of Tables

A table can be created in the editor using either a keyboard shortcut or the toolbar. With the quick toolbar, you can perform table cell insert, delete, split, and merge operations. You can style the table cells using background colours and borders.

S No	Name	Age	Gender	Occupation
1	Selma Rose	30	Female	Engineer
2	Robert	28	Male	Graphic Designer
3	William	35	Male	Teacher
4	Laura Grace	42	Female	Doctor
5	Andrew James	45	Male	Lawyer

Elevating Your Content with Images

Images can be added to the editor by pasting or dragging into the editing area, using the toolbar to insert one as a URL, or uploading directly from the File Browser. Easily manage your images on the server by configuring the insertImageSettings to upload, save, or remove them.

The Editor can integrate with the Syncfusion Image Editor to crop, rotate, annotate, and apply filters to images. Check out the demos here.

This sample used Code mirror plugins helps to highlight the HTML content and when changes happens in code view, the same has been reflected in preview mode.

This sample has Mention control integraed used to display a list of items that users can select or tag from the suggested list.

The quick toolbar provides a convenient way to customize Image, Video, Audio, Table, and Link elements. Simply right-click on the desired element, utilizing the showOnRightClick property, and the quick toolbar will appear, providing an easy way for customization.

The editor’s toolbar contains commands to format the content. The toolbar consists of:

Lists - NumberFormat list and BulletFormat list types.
Links - A hyperlink can be inserted into the editor for quick access to related information.
Image - Inserts and manages images.
Table - Inserts and manages Tables.
Alignment - Aligns the content with left, center, and right margins.
Undo/Redo - Allows undo/redo operations.
Indent/ Outdent - Increases/decreases the indent level of the content.
Font - Able to do styling on text like font family, size, fore color and background color.
Lower / Upper case – Changes the casing of the selected text.
SubScript / SuperScript - Makes the selected text as subscript (lower)/superscript(upper).
FullScreen - Stretches the editor to the maximum width and height of the browser window.
Format – Formats the sentence in different ways such as heading level, quotation, and code snippet
Styles – Allows you to apply inline styles to the selected content like bold, italic, and more.
Insert Code - Allows you to apply code format to the selected parent nodes. In the above sample, the style for the code format ('pre' tag) is applied by adding the background color.
Audio - Inserts and manages audios.
Video - Inserts and manages videos.
InlineCode - Formats selected text as inline code, highlighting code snippets within the text.

Injecting Module

The above features built as modules have to be included in your application. For example, to use image and link, inject the specific module using RichTextEditor.Inject (Toolbar, Link, Image, Count, HtmlEditor, QuickToolbar, Table, FileManager, Audio, Video, PasteCleanup).

Blazor Rich Text Editor Overview Example - Syncfusion Demos

Loading Syncfusion Blazor Server Demos…

Example of Overview in Blazor Rich Text Editor Component