{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "rich-text-editor-file-browser",
  "framework": "react",
  "type": "registry:component",
  "component": "RichTextEditor",
  "variant": "file-browser",
  "dependencies": [
    "@syncfusion/ej2-react-richtexteditor"
  ],
  "description": "Rich text editor opens a file browser and inserts selected files as inline images.",
  "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/react/llms.txt",
    "skillPack": "syncfusion/react-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/react/js/rich-text-editor-file-browser.md"
  },
  "files": [
    {
      "target": "src/components/rich-text-editor-file-browser/RichTextEditor.jsx",
      "content": "import { RichTextEditorComponent, HtmlEditor, Inject, Toolbar, QuickToolbar, Image, Link, Table, Video, Audio, ClipBoardCleanup, AutoFormat } from '@syncfusion/ej2-react-richtexteditor';\nimport { FileManager } from '@syncfusion/ej2-react-richtexteditor';\nfunction FileBrowser() {\n    const hostUrl = 'https://services.syncfusion.com/react/production/';\n    const toolbarSettings = {\n        items: ['FileManager', 'Image']\n    };\n    const fileManagerSettings = {\n        enable: true,\n        ajaxSettings: {\n            url: hostUrl + 'api/RichTextEditor/FileOperations',\n            getImageUrl: hostUrl + 'api/RichTextEditor/GetImage',\n            uploadUrl: hostUrl + 'api/RichTextEditor/Upload',\n            downloadUrl: hostUrl + 'api/RichTextEditor/Download'\n        }\n    };\n    return (<div className='control-pane'>\n            <div>\n                <div className='control-section' id=\"rteAPI\">\n                    <div className='rte-control-section'>\n                        <RichTextEditorComponent toolbarSettings={toolbarSettings} fileManagerSettings={fileManagerSettings}>\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                            <Inject services={[HtmlEditor, Toolbar, Image, Link, QuickToolbar, FileManager, Table, Video, Audio, ClipBoardCleanup, AutoFormat]}/>\n                        </RichTextEditorComponent>\n                    </div>\n                </div>\n            </div>\n\n\n        </div>);\n}\nexport default FileBrowser;"
    }
  ]
}