The online HTML editor sample demonstrates how to create LIVE editing scenario with real-world applications using JavaScript Rich Text Editor. Most of the control features are enabled in this sample to edit the content quickly.
You can edit the source code and content also parallelly. The source code is formatted using the code mirror library.
Rich Text Editor Online Html Editor
PREVIEW
HTML SOURCE CODE
The Rich Text Editor is a WYSIWYG (what you see is what you get) editor used to create and edit the content and return the valid HTML markup or markdown of the content. This provides a lot of commands to edit and format the content.
Toolbar
The editor’s toolbar provides various commands to align the text, format, insert a link, image, list, undo/redo operations, HTML view, and more. The toolbar comes with different modes such as floating, multi-row, and expanded.
Links
Create a hyperlink using the 'insert link' dialog and you can edit the hyperlink text, display text, and tooltip using the 'edit link' dialog and quick toolbar. If the text has valid hyperlink text, the editor converts it to hyperlink automatically. For example, link to Rich Text Editor.
Table
This editor allows you to insert a table with options to add, edit, and remove and perform other table-related actions.
For example
| Employee name | Role | Country | |
|---|---|---|---|
| Janet Fleet | Manager | janet95@arpy.com | France |
| Nancy Buchanan | Project Lead | nancy55@rpy.com | Sweden |
| Rose Rose | Project Lead | rose44@sample.com | France |
Image
Allows you to insert images with caption, alt text, link, resize, and drag-and-drop from an online source and local computer. You can upload an image to the server and insert it into the editor. It provides an option to customize a quick toolbar for an image.
For example
Lists
You can include content with ordered and unordered lists.
Examples for an ordered list:
- TypeScript
- Javascript
- Angular
- React
- Vue
Examples for an unordered list:
- Rich Text Editor
- Toolbar
- Button
- Dialog
- Data Grid
The editor has a lot of features to edit HTML content and Markdown content in web applications.
This sample explains how to create a live HTML editor application using Rich Text Editor. Click ‘open in new window’ and edit both the content and HTML source.