# rich-text-editor-file-browser

> Rich text editor sample integrating a file browser for selecting and inserting media.

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

**Install Package(s)**

```bash
npm install @syncfusion/ej2-angular-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/file-browser.component.ts

```typescript
/**
 * Rich Text Editor File Browser Sample
 */
import { Component, ViewEncapsulation } from '@angular/core';
import { ToolbarService, LinkService, ImageService, QuickToolbarService, RichTextEditorModule, PasteCleanupService, VideoService, AudioService, TableService, ClipBoardCleanupService, AutoFormatService } from '@syncfusion/ej2-angular-richtexteditor';
import { HtmlEditorService, FileManagerService, FileManagerSettingsModel } from '@syncfusion/ej2-angular-richtexteditor';
import { ToolbarSettingsModel } from '@syncfusion/ej2-angular-richtexteditor';

@Component({
    selector: 'control-content',
    templateUrl: 'file-browser.html',
    encapsulation: ViewEncapsulation.None,
    providers: [ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, FileManagerService, PasteCleanupService, VideoService, AudioService, TableService, ClipBoardCleanupService, AutoFormatService],
    standalone: true,
    imports: [ RichTextEditorModule]
})

export class FileBrowserComponent {
  hostUrl: string = 'https://services.syncfusion.com/angular/production/';

  toolbarSettings: ToolbarSettingsModel = {
    items: ['FileManager', 'Image']
  };

  fileManagerSettings: FileManagerSettingsModel = {
    enable: true,
    ajaxSettings: {
      url: this.hostUrl + 'api/RichTextEditor/FileOperations',
      getImageUrl: this.hostUrl + 'api/RichTextEditor/GetImage',
      uploadUrl: this.hostUrl + 'api/RichTextEditor/Upload',
      downloadUrl: this.hostUrl + 'api/RichTextEditor/Download'
    }
  };
}
```

### src/components/rich-text-editor-file-browser/file-browser.html

```html
<div class="control-section">
    <div class="sample-container">
        <div class="default-section">
            <ejs-richtexteditor [toolbarSettings]='toolbarSettings' [fileManagerSettings]='fileManagerSettings'>
                <ng-template #valueTemplate>
                    <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/angular/demos/assets/rich-text-editor/images/RTEImage-Feather.png">
                </ng-template>
            </ejs-richtexteditor>
        </div>
    </div>
</div>

```