Add RichEdit to an MVC Application

• Aug 08, 2024
• 3 minutes to read

This topic describes how to add the client-side RichEdit control to an MVC application.

View Example: RichEdit for ASP.NET Core - How to integrate a control into an MVC application

Prerequisites

• Make sure you have Node.js and npm installed on your machine.

Requirements

• To use the RichEdit control in an MVC application, you need to have a Universal, DXperience, or ASP.NET subscription.
• Versions of the devexpress npm packages should be identical (their major and minor versions should be the same).

How to Add RichEdit to an MVC Application

Install a RichEdit Package

The devexpress-richedit npm package references devextreme-dist as peerDependencies. The peerDependencies packages should be installed manually. This allows developers to control a version of the peerDependencies packages and guarantees that the package is installed once.

Install a RichEdit package with required peerDependencies:

1. If the package.json file does not exist, create an npm configuration file as follows: npm init -y

2. Install a RichEdit package with required peerDependencies:

   npm i devextreme devextreme-dist devexpress-richedit --save
   

You can find all the libraries in the node_modules folder after the installation is completed.

Create a RichEdit Bundle

Create a RichEdit Bundle.

cd node_modules/devexpress-richedit
npm i --save-dev
npm run build-custom
cd ../..

Copy RichEdit Scripts

1. Copy the bundled script node_modules/devexpress-richedit/dist/custom/dx.richedit.min.js to the Scripts folder.
2. Copy the bundled css resources node_modules/devexpress-richedit/dist/custom/dx.richedit.css and icons from the node_modules/devexpress-richedit/dist/custom/icons folder to the Content folder.

Register the Scripts on a Page

Register the necessary script and styles in the default layout (_Layout.cshtml). If your application contains DevExpress server-side MVC extensions, register the RichEdit scripts and styles before the DevExpress script registration.

@Styles.Render("~/Content/dx.richedit.css")
@Scripts.Render("~/Scripts/dx.richedit.min.js")
...
@Html.DevExpress().GetStyleSheets(
    ...
)
@Html.DevExpress().GetScripts(
    ...
)

Create a RichEdit Object

Add a container for RichEdit to a view.

<div id='rich-container' style="width: 100%; height: 900px"></div>

Create the Scripts/richedit-creator.js file with the following content.

function createRichEdit(exportUrl, documentAsBase64) {
    const options = DevExpress.RichEdit.createOptions();
    options.confirmOnLosingChanges.enabled = false;
    options.exportUrl = exportUrl;
    options.width = '1400px';
    options.height = '900px';
    var richElement = document.getElementById("rich-container");
    const richEdit = DevExpress.RichEdit.create(richElement, options);
    if (documentAsBase64)
        richEdit.openDocument(documentAsBase64, "DocumentName", DevExpress.RichEdit.DocumentFormat.Rtf);
}

Register the scripts in the view.

@Scripts.Render("~/Scripts/richedit-creator.js")
@Scripts.Render("~/Scripts/jquery-3.4.1.js")
<script>
    $(document).ready(function () {
        createRichEdit('@Url.Action("SaveDocument", "Home", null, Request.Url.Scheme)', '@ViewBag.Document');
    });
</script>

How to set RichEdit options | Client-side API code samples

Save a Document

Add the following code to the Home controller.

    private const string documentFolderPath = "~/Docs/";

    [HttpPost]
    public ActionResult SaveDocument(string base64, string fileName, int format, string reason) {
        byte[] fileContent = Convert.FromBase64String(base64);
        System.IO.File.WriteAllBytes(Server.MapPath($"{documentFolderPath}{fileName}.{GetExtension(format)}"), fileContent);
        return new EmptyResult();
    }

    private static string GetExtension(int format) {
        switch (format) {
            case 4: return "docx";
            case 2: return "rtf";
            case 1: return "txt";
        }
        return "docx";
    }

Open a Document

Add the following code to the Home controller to open a document on RichEdit’s first load.

private const string documentFolderPath = "~/Docs/";

public ActionResult Index()
{
    //ViewBag.Document = Convert.ToBase64String(System.IO.File.ReadAllBytes(Server.MapPath($"{documentFolderPath}template.rtf")));
    ViewBag.Document = "e1xydGYxXGRlZmYwe1xmb250dGJse1xmMCBDYWxpYnJpO319e1xjb2xvcnRibCA7XHJlZDB"
        + "cZ3JlZW4wXGJsdWUyNTUgO1xyZWQyNTVcZ3JlZW4yNTVcYmx1ZTI1NSA7fXtcKlxkZWZjaHAgXGZzMjJ9e1xzdHl"
        + "sZXNoZWV0IHtccWxcZnMyMiBOb3JtYWw7fXtcKlxjczFcZnMyMiBEZWZhdWx0IFBhcmFncmFwaCBGb250O317XCp"
        + "cY3MyXGZzMjJcY2YxIEh5cGVybGluazt9e1wqXHRzM1x0c3Jvd2RcZnMyMlxxbFx0c3ZlcnRhbHRcdHNjZWxsY2J"
        + "wYXQyXHRzY2VsbHBjdDBcY2x0eGxydGIgTm9ybWFsIFRhYmxlO319e1wqXGxpc3RvdmVycmlkZXRhYmxlfXtcaW5"
        + "mb31cbm91aWNvbXBhdFxzcGx5dHduaW5lXGh0bWF1dHNwXGV4cHNocnRuXHNwbHRwZ3BhclxkZWZ0YWI3MjBcc2V"
        + "jdGRcbWFyZ2xzeG4xNDQwXG1hcmdyc3huMTQ0MFxtYXJndHN4bjE0NDBcbWFyZ2JzeG4xNDQwXGhlYWRlcnk3MjB"
        + "cZm9vdGVyeTcyMFxwZ3dzeG4xMjI0MFxwZ2hzeG4xNTg0MFxjb2xzMVxjb2xzeDcyMFxwYXJkXHBsYWluXHFse1x"
        + "mczIyXGNmMFxjczEgRG9jdW1lbnQgdGV4dH1cZnMyMlxjZjBccGFyfQ==";
    return View();
}