File browser in ASP.NET MVC Rich text editor Control

4 Mar 20252 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 control.

  • 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); }).Value(ViewBag.value).Render()
public class HomeController : Controller
{
    public ActionResult Index()
    {
        string hostUrl = "https://ej2-aspcore-service.azurewebsites.net/";
        ViewBag.ajaxSettings = new {
            url = hostUrl + "api/FileManager/FileOperations",
            getImageUrl = hostUrl + "api/FileManager/GetImage",
            uploadUrl = hostUrl + "api/FileManager/Upload",
            downloadUrl = hostUrl + "api/FileManager/Download"
        };
        ViewBag.value = @"<p>The Syncfudion 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>";
        ViewBag.items = new[] { "FileManager", "Image" };
        return View();
    }
}