# rich-text-editor-default

> Rich text editor with toolbar, image, link, table, video, and paste cleanup tools.

**Framework:** vue  **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/vue/rich-text-editor-default.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-vue-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/RichTextEditor.vue

```vue
<template>
<div>
<div class="control-section">
    <div class="sample-container">
        <div class="default-section">
            <ejs-richtexteditor>
                <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>         
            </ejs-richtexteditor>
        </div>
    </div>
</div>

</div>
</template>
<script>
import { RichTextEditorComponent, Toolbar, Link, Image, QuickToolbar, HtmlEditor, Table, Video, Audio, PasteCleanup, ClipBoardCleanup, AutoFormat } from "@syncfusion/ej2-vue-richtexteditor";

export default {
    components: {
      'ejs-richtexteditor': RichTextEditorComponent
    },
    provide:{
        richtexteditor:[Toolbar, Link, Image, QuickToolbar, HtmlEditor, Table, Video, Audio, PasteCleanup, ClipBoardCleanup, AutoFormat]
    }
}
</script>
```

### src/components/rich-text-editor-default/RichTextEditorView.vue

```vue
<template>
  <RTE />
</template>

<script setup>
import RTE from '../../components/RichTextEditor.vue'
</script>
```