File Browser in React Rich Text Editor

18 Nov 20189 minutes to read

The File Browser in the Rich Text Editor enables browsing and inserting files, such as images, in the edit panel. 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/tailwind3.css";
  @import "../../node_modules/@syncfusion/ej2-grids/styles/tailwind3.css";
  @import "../../node_modules/@syncfusion/ej2-filemanager/styles/tailwind3.css";

The following example explains about how to configure the file browser within the Rich Text Editor component.

  • Configure the FileManager toolbar item in the toolbarSettings API items property.
  • Set enable property as true on fileManagerSettings property to make the file browser in the Rich Text Editor to appear on the FileManager 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 {
    rteValue = "<p>The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";
    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 value={this.rteValue} fileManagerSettings={this.fileManagerSettings} toolbarSettings={this.toolbarSettings}>
        <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']
  }
  private rteValue: string = "<p>The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";

  public render() {
    return (
      <RichTextEditorComponent value={this.rteValue} fileManagerSettings={this.fileManagerSettings} toolbarSettings={this.toolbarSettings}>
        <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 rteValue = "<p>The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";
    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 value={rteValue} fileManagerSettings={fileManagerSettings} toolbarSettings={toolbarSettings}>
      <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 rteValue: string = "<p>The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";
  let fileManagerSettings: object = {
    enable: true,
    path: '/Pictures/Food',
    ajaxSettings: {
      url: 'https://ej2-aspcore-service.azurewebsites.net/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 value={rteValue} fileManagerSettings={fileManagerSettings} toolbarSettings={toolbarSettings}>
      <Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar, FileManager]} />
    </RichTextEditorComponent>
  );
}

export default App;