Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

Add RichEdit to an MVC Application

  • 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

#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:

    console
    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.

console
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.

cshtml
@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.

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

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

javascript
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.

cshtml
@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.

C#
    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.

C#
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();
}