Search results

File Browser in ASP.NET Core RichTextEditor control

23 Feb 2021 / 1 minute 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.
tagHelper
controller.cs
<ejs-richtexteditor id="fileBrowser">
    <e-content-template>
        <div>
            <p>Rich Text Editor allows to insert images from online source as well as local computer where you want to insert the image in your content.</p>
            <p><b>Get started Quick Toolbar to click on the image</b></p>
            <p>It is possible to add custom style on the selected image inside the Rich Text Editor through quick toolbar.</p>
            <img alt='Logo' style='width: 300px; height: 300px; transform: rotate(0deg);' src='@Url.Content("~/images/RichTextEditor/RTEImage-Feather.png")' />
        </div>
    </e-content-template>
    <e-richtexteditor-toolbarsettings items="@ViewBag.items"></e-richtexteditor-toolbarsettings>
    <e-richtexteditor-filemanagersettings enable="true" path="/Pictures/Food" ajaxSettings="@ViewBag.ajaxSettings"></e-richtexteditor-filemanagersettings>
</ejs-richtexteditor>
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.items = new[] { "FileManager", "Image" };
        return View();
    }
}