File Browser

17 Feb 20222 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.

The following example explains 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.
@Html.EJS().RichTextEditor("fileBrowser").ToolbarSettings(e => e.Items((object)ViewBag.items)).FileManagerSettings(e => { e.Enable(true); e.Path("/Pictures/Food"); e.AjaxSettings((object)ViewBag.ajaxSettings); }).ContentTemplate(@<div>
        The Rich Text Editor control 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><b> Key features:</b></p>
        <li><p> Provides &lt; IFRAME &gt; and &lt; DIV &gt; 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>

public class HomeController : Controller
    public ActionResult Index()
        string hostUrl = "";
        ViewBag.ajaxSettings = new {
            url = hostUrl + "api/FileManager/FileOperations",
            getImageUrl = hostUrl + "api/FileManager/GetImage",
            uploadUrl = hostUrl + "api/FileManager/Upload",
            downloadUrl = hostUrl + "api/FileManager/Download"
        ViewBag.items = new[] { "FileManager", "Image" };
        return View();