ContextQMD
Back to Devexpress

Rich Text Editor

aspnetmvc-114045-components-rich-text-editor.md

latest5.6 KB
Original Source

Rich Text Editor

  • Mar 06, 2024
  • 7 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 RichEdit(RichEditSettings) 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”:

csharp
@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 following topic: Upload Control Troubleshooting.

Partial View code - “RichEditPartial”:

csharp
@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”):

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

Main Features

The DevExpress ASP.NET MVC Rich Text Editor allows you to introduce Microsoft® Word®-like text editing features into your next web application with ease. The Rich Text Editor is implemented as the RichEdit(RichEditSettings) extension, which provides advanced text formatting capabilities and delivers numerous end-user options, helping you deliver compelling business solutions.

Note

The MVC RichEdit extension has the same functionality as the Web Forms ASPxRichEdit control. For this reason, the Learn More links in this section navigate to Web Forms topics.

Supported File Formats

Various popular formats are supported to load, convert and save documents - DOC, DOCX, RTF, HTML, MHT, XML, ODT, TXT. Documents can be exported to PDF. Learn more…

See demo: Load/Save | See demo: Export to PDF

Automation Features

  • Field Support

  • Document Variables Support

  • Mail Merge

Content Formatting Features

The RichEdit provides all formatting features you would expect from a word processor.

  • Character Formatting

  • Paragraph Formatting

  • Bulleted and Numbered Lists

  • Styles

  • Tables

Content Editing Features

  • Undo/Redo History

  • Clipboard Operations Support

  • Inline Pictures

  • Bookmarks

  • Hyperlinks

  • Drag and Drop Support

  • Spell Checking

  • Full-text Search

Content Layout

  • Support for Document Sections

  • Page Settings Customization

  • Multi-column Layout

  • Section Breaks

  • Headers and Footers

Document and Operation Restrictions

  • Operation Restrictions

  • Document Restrictions

See demo… | Learn more…

UI Experience

The RichEdit provides a UI experience similar to that of Microsoft® Word®.

  • Ribbon UI

  • Advanced Context Menus and Built-in Dialogs

  • UI for Printing

  • Horizontal Ruler

  • Status Bar

  • Fullscreen Mode

Developer API

  • Server-Side API

  • Client-Side API

Localization

All DevExpress ASP.NET controls and ASP.NET MVC extensions use the same approach to localize their UI. Read more…

How To

Reference