# rich-text-editor-file-browser

> Rich text editor opens a file browser and inserts selected files as inline images.

**Framework:** vue  **Component:** RichTextEditor  **Variant:** file-browser

## 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-file-browser.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-file-browser/RichTextEditor.vue

```vue
<template>
    <div>
        <div class="control-section">
            <div class="control-section">
                <div class="control-wrapper">
                    <div class="sample-container">
                        <div class="default-section">
                            <ejs-richtexteditor ref="rteObj" :toolbarSettings="toolbarSettings" :fileManagerSettings="fileManagerSettings">
                                <p>Rich Text Editor allows inserting images from online sources as well as the local computers where you want to insert the image in your content.</p>
                                <p><b>Get started Quick Toolbar to click on the image</b></p>
                                <p>It is possible to add custom style on the selected image inside the RichTextEditor through the quick toolbar.</p>
                                <img id="rteImageID" style="width:300px; height:300px;transform: rotate(0deg);" alt="Logo" src="https://ej2.syncfusion.com/vue/demos/src/rich-text-editor/images/RTEImage-Feather.png">
                            </ejs-richtexteditor>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

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

let hostUrl = 'https://services.syncfusion.com/vue/production/';

export default {
    components: {
      'ejs-richtexteditor': RichTextEditorComponent
    },
    data: function() {
        return {
            toolbarSettings: {
                items: ['FileManager', 'Image']
            },
            fileManagerSettings: {
                enable: true,
                ajaxSettings: {
                    url: hostUrl + 'api/RichTextEditor/FileOperations',
                    getImageUrl: hostUrl + 'api/RichTextEditor/GetImage',
                    uploadUrl: hostUrl + 'api/RichTextEditor/Upload',
                    downloadUrl: hostUrl + 'api/RichTextEditor/Download'
                }
            }
        };
    },
    provide: {
        richtexteditor:[Toolbar, Image,  Link, HtmlEditor, QuickToolbar, FileManager, PasteCleanup, Table, Video, Audio, ClipBoardCleanup, AutoFormat]
    }
}
</script>
```

### src/components/rich-text-editor-file-browser/RichTextEditorView.vue

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

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