Rich Text Editor
- 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”:
@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.
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, 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.
Document Variables Support
The DOCVARIABLE field enables you to perform complex merge and substitution operations with documents.
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.
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.
Paragraph Formatting
Formatting options for paragraphs include alignment, indentation, variable paragraph and line spacing.
Bulleted and Numbered Lists
Bulleted, numbered and multi-level lists can be created and modified.
Styles
Both paragraph and character based styles are supported, as well as style inheritance. Stylesheets are compatible with Microsoft® Word®.
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. .
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.).
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.
Hyperlinks
Hyperlinks to external locations and internal bookmarks can be easily created and modified.
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.
Full-text Search
The Find and Replace feature allows end-users to easily locate and modify text within the entire open document.
Content Layout
Support for Document Sections
You can divide documents into a number of different sections with individual page settings and formatting.
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.
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.
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.
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.
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.
Localization
All DevExpress ASP.NET controls and ASP.NET MVC extensions use the same approach to localize their UI. Read more…