{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "rich-text-editor-file-browser",
  "framework": "angular",
  "type": "registry:component",
  "component": "RichTextEditor",
  "variant": "file-browser",
  "dependencies": [
    "@syncfusion/ej2-angular-richtexteditor"
  ],
  "description": "Rich text editor sample integrating a file browser for selecting and inserting media.",
  "meta": {
    "essentialStudioRelease": "2026 Volume 2 (v34.1.29)",
    "license": "commercial-or-community",
    "licenseNote": "The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md",
    "requiresLicenseKey": true,
    "requiresServerEndpoint": true,
    "platformIndex": "https://ai.syncfusion.com/angular/llms.txt",
    "skillPack": "syncfusion/angular-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/angular/rich-text-editor-file-browser.md"
  },
  "files": [
    {
      "target": "src/components/rich-text-editor-file-browser/file-browser.component.ts",
      "content": "/**\n * Rich Text Editor File Browser Sample\n */\nimport { Component, ViewEncapsulation } from '@angular/core';\nimport { ToolbarService, LinkService, ImageService, QuickToolbarService, RichTextEditorModule, PasteCleanupService, VideoService, AudioService, TableService, ClipBoardCleanupService, AutoFormatService } from '@syncfusion/ej2-angular-richtexteditor';\nimport { HtmlEditorService, FileManagerService, FileManagerSettingsModel } from '@syncfusion/ej2-angular-richtexteditor';\nimport { ToolbarSettingsModel } from '@syncfusion/ej2-angular-richtexteditor';\n\n@Component({\n    selector: 'control-content',\n    templateUrl: 'file-browser.html',\n    encapsulation: ViewEncapsulation.None,\n    providers: [ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, FileManagerService, PasteCleanupService, VideoService, AudioService, TableService, ClipBoardCleanupService, AutoFormatService],\n    standalone: true,\n    imports: [ RichTextEditorModule]\n})\n\nexport class FileBrowserComponent {\n  hostUrl: string = 'https://services.syncfusion.com/angular/production/';\n\n  toolbarSettings: ToolbarSettingsModel = {\n    items: ['FileManager', 'Image']\n  };\n\n  fileManagerSettings: FileManagerSettingsModel = {\n    enable: true,\n    ajaxSettings: {\n      url: this.hostUrl + 'api/RichTextEditor/FileOperations',\n      getImageUrl: this.hostUrl + 'api/RichTextEditor/GetImage',\n      uploadUrl: this.hostUrl + 'api/RichTextEditor/Upload',\n      downloadUrl: this.hostUrl + 'api/RichTextEditor/Download'\n    }\n  };\n}"
    },
    {
      "target": "src/components/rich-text-editor-file-browser/file-browser.html",
      "content": "<div class=\"control-section\">\n    <div class=\"sample-container\">\n        <div class=\"default-section\">\n            <ejs-richtexteditor [toolbarSettings]='toolbarSettings' [fileManagerSettings]='fileManagerSettings'>\n                <ng-template #valueTemplate>\n                    <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>\n                    <p><b>Get started Quick Toolbar to click on the image</b></p>\n                    <p>It is possible to add custom style on the selected image inside the RichTextEditor through the quick toolbar.</p>\n                    <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\">\n                </ng-template>\n            </ejs-richtexteditor>\n        </div>\n    </div>\n</div>\n\n"
    }
  ]
}