Rich Text Editor

  • 7 min 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":

@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

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.

Supported File Formats

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

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

Automation Features

  • Field Support

    A subset of fields defined in the ECMA-376 (Office OpenXML) standard is currently supported.

    See demo... | Learn more...

  • Document Variables Support

    The DOCVARIABLE field enables you to perform complex merge and substitution operations with documents.

    See demo... | Learn more...

  • Mail Merge

    You can bind the ASPxRichEdit to an external data source and allow end-users to preview dynamic content right in the opened template document, prior to performing final mail merge.

    See demo... | Learn more...

Content Formatting Features

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

  • Character Formatting

    Characters can be formatted using different settings for font, font size, character style - bold, italics, underlined, strike-through, and different colors for background and foreground.

    See demo... | Learn more...

  • Paragraph Formatting

    Formatting options for paragraphs include alignment, indentation, variable paragraph and line spacing.

    See demo... | Learn more...

  • Bulleted and Numbered Lists

    Bulleted, numbered and multi-level lists can be created and modified.

    See demo...

  • Styles

    Both paragraph and character based styles are supported, as well as style inheritance. Stylesheets are compatible with Microsoft® Word®.

    See demo...

  • Tables

    End-users can insert tables, rows and columns, edit a table layout by splitting and merging cells, align cell content, apply borders and shading to individual cells, delete cells, columns and rows. .

    See demo... | Learn more...

Content Editing Features

  • Undo/Redo History

    Undo and redo operations are supported. The undo/redo history contains the last 100 operations.

  • Clipboard Operations Support

    Clipboard operations (Cut, Copy, and Paste) can be used with text and images.

  • Inline Pictures

    Pictures can be embedded inline with text (in all popular formats, including JPEG, JPG, PNG, GIF, etc.).

    See demo... | Learn more...

  • Bookmarks

    The content within a document can be marked as a named bookmark. Then, a hyperlink pointing to the bookmark by its name can be created.

    See demo... | Learn more...

  • Hyperlinks

    Hyperlinks to external locations and internal bookmarks can be easily created and modified.

    See demo... | Learn more...

  • Drag and Drop Support

    Images and text blocks can be moved using drag-and-drop.

  • Spell Checking

    The spell checking feature allows the RichEdit to highlight words with possible errors and provide spelling suggestions.

    See demo... | Learn more...

  • Full-text Search

    The Find and Replace feature allows end-users to easily locate and modify text within the entire open document.

    See demo...

Content Layout

  • Support for Document Sections

    You can divide documents into a number of different sections with individual page settings and formatting.

    See demo...

  • Page Settings Customization

    You can quickly set page margins, change page orientation and size for individual sections or the whole document.

  • Multi-column Layout

    You can lay out text in multiple columns within a particular section.

  • Section Breaks

    Different types of breaks are supported - page breaks, column breaks and section breaks.

  • Headers and Footers

    Different headers and footers can be specified for the first page, odd and even pages, and each particular section. Page numbering fields (the current page number and the total number of pages) can be inserted.

    See demo... | Learn more...

Document and Operation Restrictions

  • Operation Restrictions

    Commands such as Copy, Cut, Paste, Drag, Drop, Open, Save, Print can be selectively disabled or hidden. The context menu can be disabled.

  • Document Restrictions

    Character/paragraph formatting, inline images, hyperlinks, sections and numbering functionality can be permitted or denied.

See demo... | Learn more...

UI Experience

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

  • Ribbon UI

    The RichEdit's UI experience includes full integration with the DevExpress ASP.NET MVC Ribbon extension. The RichEdit can use either a built-in ribbon or an external ribbon as a toolbar. A ribbon can be automatically populated with the default ribbon tabs. Or you can manually customize the ribbon based on your application needs.

    See demo...

  • Advanced Context Menus and Built-in Dialogs

    The RichEdit provides several context menus allowing you to quickly perform actions linked to specific elements. Specially designed built-in dialogs help you work with documents and modify different document element settings.

    See demo...

  • UI for Printing

    An integrated UI allows end-users to customize document print settings and print document content as needed.

  • Horizontal Ruler

    The horizontal ruler controls the width of text columns and the horizontal spacing of paragraph margins and tabs.

  • Status Bar

    A status bar is displayed at the bottom of the editor providing helpful feedback to end-users (e.g., when the editor sends callbacks to the server).

  • Fullscreen Mode

    The RichEdit can be maximized to occupy a browser's entire client region. You can show dialogs under an external ribbon in Fullscreen mode.

Developer API

  • Server-Side API

    The RichEdit extension is built on the DevExpress RichEdit Core Library and internally uses its comprehensive set of methods, events and commands (to provide feature-rich text editing capabilities).

  • Client-Side API

    The RichEdit provides a comprehensive client API, allowing you to manipulate the open document programmatically on the client side.

    See demo... |Learn more...

Localization

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

HOW TO

REFERENCE