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 a Web Forms Application

  • 3 minutes to read

This topic describes how to add the client-side RichEdit control to a Web Forms application.

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

#Prerequisites

#Requirements

  • To use the RichEdit control in a Web Forms 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 a Web Forms 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

Add scripts into the <head> tag of the Default.aspx page.

html
<link href="Content/dx.richedit.css" rel="stylesheet" />
<script src="Scripts/dx.richedit.min.js"></script>

#Create a JavaScript Function that Initializes a RichEdit

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);
}

Add scripts into the <head> tag of the Default.aspx page.

html
<script src="./richedit-creator.js"></script>

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

#Create a RichEdit Object

  • Add a container for RichEdit to the Default.aspx page.

    html
    <div id='rich-container' style="width: 100%; height: 900px"></div>
    
  • Create a RichEdit Object.

    javascript
    <script>
        $(document).ready(function () {
            createRichEdit('<%=InitialDocument %>');
        });
    </script>
    

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

#Save a Document

RichEdit uses post requests to save a document. We recommend that you use the Web API to handle these requests.

  • Add the following code to the AppStart/RouteConfig.cs file to add a routing for the Web API.

    C#
    using System.Web.Http;
    ...
    public static void RegisterRoutes(RouteCollection routes) {
                ...
                routes.MapHttpRoute(name: "WebApiRoute",
                    routeTemplate: "api/{controller}/{id}",
                    defaults: new { id = RouteParameter.Optional });
            }
    
  • Create the Controllers/RichEditController.cs controller ad populate it with the followig code.

    C#
    using System;
    using System.Web.Http;
    
    namespace ClientWebFormsRichEdit {
        public class DocumentInfo {
            public string Base64 { get; set; }
            public string FileName { get; set; }
            public int Format { get; set; }
            public string Reason { get; set; }
        }
    
        public class RichEditController : ApiController {
            private const string documentFolderPath = "~/App_Data/";
    
            [HttpPost]
            public void SaveDocument([FromBody]DocumentInfo docInfo) {
                byte[] fileContent = Convert.FromBase64String(docInfo.Base64);
                string path = System.Web.Hosting.HostingEnvironment.MapPath($"{documentFolderPath}{docInfo.FileName}.{GetExtension(docInfo.Format)}");
                System.IO.File.WriteAllBytes(path, fileContent);
            }
    
            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

To open a document on RichEdit’s first load, save a document path to a public global variable and pass it to RichEdit’s page.

C#
public string InitialDocument;
...
protected void Page_Load(object sender, EventArgs e)
{
    //InitialDocument = Convert.ToBase64String(System.IO.File.ReadAllBytes(
        //  Server.MapPath($"{documentFolderPath}template.rtf")));
    InitialDocument = "e1xydGYxXGRlZmYwe1xmb250dGJse1xmMCBDYWxpYnJpO319e1xjb2xvcnRibCA7XHJlZDB"
        + "cZ3JlZW4wXGJsdWUyNTUgO1xyZWQyNTVcZ3JlZW4yNTVcYmx1ZTI1NSA7fXtcKlxkZWZjaHAgXGZzMjJ9e1xzdHl"
        + "sZXNoZWV0IHtccWxcZnMyMiBOb3JtYWw7fXtcKlxjczFcZnMyMiBEZWZhdWx0IFBhcmFncmFwaCBGb250O317XCp"
        + "cY3MyXGZzMjJcY2YxIEh5cGVybGluazt9e1wqXHRzM1x0c3Jvd2RcZnMyMlxxbFx0c3ZlcnRhbHRcdHNjZWxsY2J"
        + "wYXQyXHRzY2VsbHBjdDBcY2x0eGxydGIgTm9ybWFsIFRhYmxlO319e1wqXGxpc3RvdmVycmlkZXRhYmxlfXtcaW5"
        + "mb31cbm91aWNvbXBhdFxzcGx5dHduaW5lXGh0bWF1dHNwXGV4cHNocnRuXHNwbHRwZ3BhclxkZWZ0YWI3MjBcc2V"
        + "jdGRcbWFyZ2xzeG4xNDQwXG1hcmdyc3huMTQ0MFxtYXJndHN4bjE0NDBcbWFyZ2JzeG4xNDQwXGhlYWRlcnk3MjB"
        + "cZm9vdGVyeTcyMFxwZ3dzeG4xMjI0MFxwZ2hzeG4xNTg0MFxjb2xzMVxjb2xzeDcyMFxwYXJkXHBsYWluXHFse1x"
        + "mczIyXGNmMFxjczEgRG9jdW1lbnQgdGV4dH1cZnMyMlxjZjBccGFyfQ==";
}