Blazor Rich Text Editor Example - Overview
This sample demonstrates the complete feature set of the Rich Text Editor, including all available 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,
InlineCodeand 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.
Or drop files here
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 includes tools for formatting 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 snippetStyles– 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.Inline Code- Formats selected text as inline code, highlighting code snippets within the text.Slash Menu- The Slash Menu feature lets users apply formats, open dialogs by typing "/" in the editor.Format Painter- The Format Painter feature allows you to copy the formats and apply them to content without formatting thus saving time to reformat the content.Horizontal Line- A horizontal line can be inserted into the editor to visually separate sections of content.Code Block- The Code Block feature lets users insert and display code snippets in a preformatted block, making it easier to present programming content within the editor.