# rich-text-editor-file-browser

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

**Framework:** react  **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/react/ts/rich-text-editor-file-browser.json
```

**Install Package(s)**

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

```tsx
/**
 * Rich Text Editor File Browser sample
 */
import { RichTextEditorComponent, HtmlEditor, Inject, Toolbar, QuickToolbar, Image, Link, Table, Video, Audio, ClipBoardCleanup, AutoFormat } from '@syncfusion/ej2-react-richtexteditor';
import { type ToolbarSettingsModel, FileManager, type FileManagerSettingsModel } from '@syncfusion/ej2-react-richtexteditor';
function FileBrowser() {
    const hostUrl: string = 'https://services.syncfusion.com/react/production/';
    const toolbarSettings: ToolbarSettingsModel = {
        items: ['FileManager', 'Image']
    }
    const fileManagerSettings: FileManagerSettingsModel = {
        enable: true,
        ajaxSettings: {
            url: hostUrl + 'api/RichTextEditor/FileOperations',
            getImageUrl: hostUrl + 'api/RichTextEditor/GetImage',
            uploadUrl: hostUrl + 'api/RichTextEditor/Upload',
            downloadUrl: hostUrl + 'api/RichTextEditor/Download'
        }
    }
    return (
        <div className='control-pane'>
            <div>
                <div className='control-section' id="rteAPI">
                    <div className='rte-control-section'>
                        <RichTextEditorComponent 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>
                            <Inject services={[HtmlEditor, Toolbar, Image, Link, QuickToolbar, FileManager, Table, Video, Audio, ClipBoardCleanup, AutoFormat]} />
                        </RichTextEditorComponent>
                    </div>
                </div>
            </div>

        </div>
    );
}
export default FileBrowser;
```