File browser in React Rich text editor component
20 Jan 202320 minutes to read
Rich Text Editor allows to browse and insert images in the edit panel using the file browser. File browser allows the users to browse and select a file or folder from the file system and it supports various cloud services.
Required additional dependency
The following list of additional dependencies are required to use the file browser feature in the Rich Text Editor.
|-- @syncfusion/ej2-react-richtexteditor
|-- @syncfusion/ej2-layouts
|-- @syncfusion/ej2-grids
|-- @syncfusion/ej2-filemanager
Additional CSS Reference
Additionally add the below styles in the [src/App.css]
file.
@import "../../node_modules/@syncfusion/ej2-layouts/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-filemanager/styles/material.css";
The following example explains about how to configure the file browser within the Rich Text Editor component.
- Configure the
FileManager
toolbar item in thetoolbarSettings
APIitems
property. - Set
enable
property astrue
onfileManagerSettings
property to make the file browser in the Rich Text Editor to appear on theFileManager
toolbar click action.
Rich Text Editor features are segregated into individual feature-wise modules. To use the file browser tool, inject the
FileManager
module using services.
[Class-component]
/**
* Rich Text Editor - File Browser Sample
*/
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar, FileManager } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
class App extends React.Component {
fileManagerSettings = {
enable: true,
path: '/Pictures/Food',
ajaxSettings: {
url: 'https://ej2-aspcore-service.azurewebsites.net/api/FileManager/FileOperations',
getImageUrl: 'https://ej2-aspcore-service.azurewebsites.net/api/FileManager/GetImage',
uploadUrl: 'https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Upload',
downloadUrl: 'https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Download'
}
};
toolbarSettings = {
items: ['FileManager']
};
render() {
return (<RichTextEditorComponent fileManagerSettings={this.fileManagerSettings} toolbarSettings={this.toolbarSettings}>
<p>The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.</p>
<p><b>Key features:</b></p>
<ul>
<li>
<p>Provides <IFRAME> and <DIV> modes</p>
</li>
<li>
<p>Capable of handling markdown editing.</p>
</li>
<li>
<p>Contains a modular library to load the necessary functionality on demand.</p>
</li>
<li>
<p>Provides a fully customizable toolbar.</p>
</li>
<li>
<p>Provides HTML view to edit the source directly for developers.</p>
</li>
<li>
<p>Supports third-party library integration.</p>
</li>
<li>
<p>Allows preview of modified content before saving it.</p>
</li>
<li>
<p>Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p>
</li>
<li>
<p>Contains undo/redo manager.</p>
</li>
<li>
<p>Creates bulleted and numbered lists.</p>
</li>
</ul>
<Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar, FileManager]}/>
</RichTextEditorComponent>);
}
}
export default App;
/**
* Rich Text Editor - File Browser Sample
*/
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar, FileManager } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
class App extends React.Component<{},{}> {
private fileManagerSettings: object = {
enable: true,
path: '/Pictures/Food',
ajaxSettings: {
url: 'https://ej2-aspcore-service.azurewebsites.net/api/FileManager/FileOperations',
getImageUrl: 'https://ej2-aspcore-service.azurewebsites.net/api/FileManager/GetImage',
uploadUrl: 'https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Upload',
downloadUrl: 'https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Download'
}
}
private toolbarSettings: object = {
items: ['FileManager']
}
public render() {
return (
<RichTextEditorComponent fileManagerSettings={this.fileManagerSettings} toolbarSettings={this.toolbarSettings}>
<p>The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.</p>
<p><b>Key features:</b></p>
<ul>
<li>
<p>Provides <IFRAME> and <DIV> modes</p>
</li>
<li>
<p>Capable of handling markdown editing.</p>
</li>
<li>
<p>Contains a modular library to load the necessary functionality on demand.</p>
</li>
<li>
<p>Provides a fully customizable toolbar.</p>
</li>
<li>
<p>Provides HTML view to edit the source directly for developers.</p>
</li>
<li>
<p>Supports third-party library integration.</p>
</li>
<li>
<p>Allows preview of modified content before saving it.</p>
</li>
<li>
<p>Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p>
</li>
<li>
<p>Contains undo/redo manager.</p>
</li>
<li>
<p>Creates bulleted and numbered lists.</p>
</li>
</ul>
<Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar, FileManager]} />
</RichTextEditorComponent>
);
}
}
export default App;
[Functional-component]
/**
* Rich Text Editor - File Browser Sample
*/
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar, FileManager } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
function App() {
let fileManagerSettings = {
enable: true,
path: '/Pictures/Food',
ajaxSettings: {
url: 'https://ej2-aspcore-service.azurewebsites.net/api/FileManager/FileOperations',
getImageUrl: 'https://ej2-aspcore-service.azurewebsites.net/api/FileManager/GetImage',
uploadUrl: 'https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Upload',
downloadUrl: 'https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Download'
}
};
let toolbarSettings = {
items: ['FileManager']
};
return (<RichTextEditorComponent fileManagerSettings={fileManagerSettings} toolbarSettings={toolbarSettings}>
<p>The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.</p>
<p><b>Key features:</b></p>
<ul>
<li>
<p>Provides <IFRAME> and <DIV> modes</p>
</li>
<li>
<p>Capable of handling markdown editing.</p>
</li>
<li>
<p>Contains a modular library to load the necessary functionality on demand.</p>
</li>
<li>
<p>Provides a fully customizable toolbar.</p>
</li>
<li>
<p>Provides HTML view to edit the source directly for developers.</p>
</li>
<li>
<p>Supports third-party library integration.</p>
</li>
<li>
<p>Allows preview of modified content before saving it.</p>
</li>
<li>
<p>Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p>
</li>
<li>
<p>Contains undo/redo manager.</p>
</li>
<li>
<p>Creates bulleted and numbered lists.</p>
</li>
</ul>
<Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar, FileManager]}/>
</RichTextEditorComponent>);
}
export default App;
/**
* Rich Text Editor - File Browser Sample
*/
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar, FileManager } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
function App(){
let fileManagerSettings: object = {
enable: true,
path: '/Pictures/Food',
ajaxSettings: {
url: 'https://ej2-aspcore-service.azurewebsites.net/api/FileManager/FileOperations',
getImageUrl: 'https://ej2-aspcore-service.azurewebsites.net/api/FileManager/GetImage',
uploadUrl: 'https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Upload',
downloadUrl: 'https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Download'
}
}
let toolbarSettings: object = {
items: ['FileManager']
}
return (
<RichTextEditorComponent fileManagerSettings={fileManagerSettings} toolbarSettings={toolbarSettings}>
<p>The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.</p>
<p><b>Key features:</b></p>
<ul>
<li>
<p>Provides <IFRAME> and <DIV> modes</p>
</li>
<li>
<p>Capable of handling markdown editing.</p>
</li>
<li>
<p>Contains a modular library to load the necessary functionality on demand.</p>
</li>
<li>
<p>Provides a fully customizable toolbar.</p>
</li>
<li>
<p>Provides HTML view to edit the source directly for developers.</p>
</li>
<li>
<p>Supports third-party library integration.</p>
</li>
<li>
<p>Allows preview of modified content before saving it.</p>
</li>
<li>
<p>Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p>
</li>
<li>
<p>Contains undo/redo manager.</p>
</li>
<li>
<p>Creates bulleted and numbered lists.</p>
</li>
</ul>
<Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar, FileManager]} />
</RichTextEditorComponent>
);
}
export default App;