{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "rich-text-editor-file-browser",
  "framework": "vue",
  "type": "registry:component",
  "component": "RichTextEditor",
  "variant": "file-browser",
  "dependencies": [
    "@syncfusion/ej2-vue-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/vue/llms.txt",
    "skillPack": "syncfusion/vue-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/vue/rich-text-editor-file-browser.md"
  },
  "files": [
    {
      "target": "src/components/rich-text-editor-file-browser/RichTextEditor.vue",
      "content": "<template>\n    <div>\n        <div class=\"control-section\">\n            <div class=\"control-section\">\n                <div class=\"control-wrapper\">\n                    <div class=\"sample-container\">\n                        <div class=\"default-section\">\n                            <ejs-richtexteditor ref=\"rteObj\" :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                                <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\">\n                            </ejs-richtexteditor>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n\n    </div>\n</template>\n\n<script>\nimport { RichTextEditorComponent, Toolbar, Image, Link, HtmlEditor, QuickToolbar, FileManager, PasteCleanup, Table, Video, Audio, ClipBoardCleanup, AutoFormat } from \"@syncfusion/ej2-vue-richtexteditor\";\n\nlet hostUrl = 'https://services.syncfusion.com/vue/production/';\n\nexport default {\n    components: {\n      'ejs-richtexteditor': RichTextEditorComponent\n    },\n    data: function() {\n        return {\n            toolbarSettings: {\n                items: ['FileManager', 'Image']\n            },\n            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        };\n    },\n    provide: {\n        richtexteditor:[Toolbar, Image,  Link, HtmlEditor, QuickToolbar, FileManager, PasteCleanup, Table, Video, Audio, ClipBoardCleanup, AutoFormat]\n    }\n}\n</script>"
    },
    {
      "target": "src/components/rich-text-editor-file-browser/RichTextEditorView.vue",
      "content": "<template>\n  <RTE />\n</template>\n\n<script setup>\nimport RTE from '../../components/RichTextEditor.vue'\n</script>"
    }
  ]
}