All docs
V18.2
20.2 (EAP/Beta)
The page you are viewing does not exist in version 20.2. This link will take you to the root page.
20.1
The page you are viewing does not exist in version 20.1. This link will take you to the root page.
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
18.1
17.2

Overview - Rich Text Editor

  • 2 minutes to read

The Rich Text Editor is a Word-inspired extension that allows you to introduce a rich text editing functionality to any ASP.NET MVC application with ease. It provides a rich UI and comprehensive API to create, manage and convert documents containing rich text formatting.

To learn more about the Rich Text Editor and see it in action, refer to the Rich Text Editor for ASP.NET MVC demos.

Implementation Details

The Rich Text Editor extension is implemented by the RichEditExtension class. To access its instance, use the ExtensionsFactory.RichEdit helper method, which is used to add a Rich Text Editor extension to a view. This method's parameter provides access to the Rich Text Editor settings implemented by the RichEditSettings class.

The Rich Text Editor's client counterpart is represented by the MVCxClientRichEdit object.

Declaration

The code sample below demonstrates how to add a Rich Text Editor to a project and open a document within it.

View code - "Index":

@using(Html.BeginForm()) {
    @Html.Partial("RichEditPartial")
}
NOTE

To enable the file downloading and uploading functionality, the Partial View with the extension must be wrapped with the HTML form. Since this functionality is implemented through the UploadControl extension, it's also necessary to fulfill all the recommendations from the corresponding KB article.

Partial View code - "RIchEditPartial":

@Html.DevExpress().RichEdit(settings => {
    settings.Name = "RichEdit";
    settings.CallbackRouteValues = new { Controller = "Home", Action = "RichEditPartial" };
    }).Open(Server.MapPath("~/App_Data/Documents/Overview.rtf")).GetHtml()

Controller ("Home"):

    public class HomeController : Controller{

        public ActionResult Index(){
            return View();
        }   

        public ActionResult RichEditPartial(){
            return PartialView("RichEditPartial");
        }
    }
NOTE

The Partial View should contain only the extension's code.

The image below illustrates the result.

RichEdit-overview.png