# rich-text-editor-default

> Rich text editor with formatting toolbar for composing and editing HTML content in the browser.

**Framework:** javascript  **Component:** RichTextEditor  **Variant:** default

## Get this item

**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:

```
GET https://ai.syncfusion.com/r/javascript/rich-text-editor-default.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-richtexteditor
```

**Notes**

- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md

## Source files

### src/components/rich-text-editor-default/rich-text-editor.html

```html
<div class="control-section">
    <div class="sample-container">
        <div class="default-section">
            <div id="defaultRTE">
                <h2>Welcome to the Rich Text Editor Demo!</h2><p>The Rich Text Editor control is a WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.</p><h4>Flexible Editing!</h4><p>For a better editing experience, the Angular Rich Text Editor component offers a variety of tools and choices. So, you can quickly insert <strong>images</strong>, <strong>videos</strong>, <strong>hyperlinks</strong>, and <strong>tables</strong>; <strong>merge table cells</strong>; and configure.</p><p>You can easily format the text and paragraphs by setting the editor’s foreground and <strong>background colors</strong>, <strong>font type</strong>, <strong>italicization</strong>, <strong>adding ordered </strong>and <strong>unordered custom lists</strong>, <strong>underlining</strong>, <strong>strikethrough</strong>, and <strong>bolding</strong>.<br><br></p><p><img alt="Editor Features Overview" src="https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png" width="400" height="200" class="e-img-left"></p> 
            </div>
        </div>
    </div>
</div>
<div id="action-description">
    <p>This sample demonstrates the default rendering of the Rich Text Editor with minimum configuration.</p>
</div>

<div id="description">
   <p>The Rich Text Editor is WYSIWYG ("what you see is what you get") editor that is used to create and 
       edit content, and return valid HTML markup. The editor provides a standard toolbar to format content using its commands. 
       The toolbar contains commands to align the text, 
       insert link, insert image, insert list, undo/redo the operation, HTML view, and more.</P>
    <p><b>Injecting Module</b></p>
    <p>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 <code>RichTextEditor.Inject (Toolbar, Link, Image, HtmlEditor, QuickToolbar)</code>.</p>
    <blockquote><p>Looking for the full JavaScript Rich Text Editor component overview, features, pricing, and documentation? Visit the [JavaScript Rich Text Editor](https://www.syncfusion.com/rich-text-editor-sdk/javascript-rich-text-editor) page.</p></blockquote>
</div>
```

### src/components/rich-text-editor-default/rich-text-editor.ts

```typescript
/**
 * Rich Text Editor default sample
 */
import { RichTextEditor, Toolbar, Link, Image, HtmlEditor, QuickToolbar, Table, Video, Audio, PasteCleanup, ClipBoardCleanup, AutoFormat } from '@syncfusion/ej2-richtexteditor';
RichTextEditor.Inject(Toolbar, Link, Image, HtmlEditor, QuickToolbar, Table, Video, Audio, PasteCleanup, ClipBoardCleanup, AutoFormat);

(window as any).default = (): void => {

    let defaultRTE: RichTextEditor = new RichTextEditor({ });
    defaultRTE.appendTo('#defaultRTE');
};

```