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
|
Mode of Transport |
|---|---|---|---|---|---|
| 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. Insert Emoticon - Inserts the emoticon to the editor Audio - Inserts and manages audios. Video - Inserts and manages videos. 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. Slash Menu - The Slash Menu feature lets users apply formats, open dialogs by typing "/" in the editor. Import / Export - The Import/Export feature enables users to import content from Word documents into the editor and export the editor's content into Word and PDF files. 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, EmojiPicker, Audio, Video, FormatPainter, PasteCleanup, SlashMenu, ImportExport).