ASP.NET Word-Inspired Rich Text Editor (Preview release coming soon)

It's finally time to introduce the DevExpress ASP.NET Rich Edit control - ASPxRichEdit. It has all the powerful editing features of great text editors like Microsoft Word, but online. And it’s beautiful, check it out here shown with the Mulberry theme:

DevExpress ASP.NET RichEdit Control

Benefits

With the DevExpress ASP.NET RichText editor control, you can craft and edit rich-text documents with your ASP.NET sites with ease. It's WYSIWYG!

  • A familiar interface like Microsoft Word for editing (with Ribbon UI)
  • Cross-browser compatible (even touch mobile browsers)
  • A rich user interface that's customizable
  • Multiple themes support
  • Document management, export, and print capabilities
  • And more... (read the features section below)

Preview for 14.2

This first version of the ASPxRichEdit control is a preview version and it's available in the 14.2 release.

A preview version means that we’re not finished with the features, stability, and other goodies that we want to bake into the new ASPxRichEdit control. For example, we're planning to add support for mail merging, table and lists support, float objects, table of contents, and more. And we are already working on these features for a future major release.

Warning: You are free to use this control in your websites today. However, be aware that it is a preview version and therefore, the API, properties, and/or features may change.

That said, the new ASP.NET RichEdit control has enough of a feature set that we'd love for you to test drive it and give us your feedback.

Features

The preview version of the ASPxRichEdit control includes:

  • Page settings support (margins, page size, orientation)
  • Paragraph settings support (vertical and horizontal spacing, alignment, indents)
  • Document styles support
  • Multiple formats supported: DOCX, RTF, TXT, XML, ODT, EPUB, MHT, and DOC
  • Multi-column text mode
  • Different kinds of breaks (page, column, section)
  • Inline images (insert, resize)
  • Horizontal document ruler (similar to desktop rich-text editor)
  • Clipboard support (includes inserting images from clipboard)
  • Built-in document manager
  • Tab stops
  • Print support
  • Full-screen mode
  • and much more...

Design time support

The DevExpress ASP.NET RichEdit control has great design time support with custom dialogs to help you build the toolbars, customize client-side API, and more:

DevExpress ASP.NET RichEdit Control

HTML vs Rich Editor

I'm sure you already know that DevExpress also offer the excellent ASP.NET HTML Editor control, ASPxHtmlEditor. So why did we introduce another document editor?

The ASPxHtmlEditor is a powerful control that was designed to edit HTML content.

However, you our excellent customers wanted a true rich text editor. We've listened to your feedback and decided last year to start working on this major new control, the ASPxRichEdit.

Rest assured that the ASPxHtmlEditor is still available and we have plans to improve it for future releases.

For now, use the:

  1. ASPxRichEdit control for editing rich text content.
  2. ASPxHtmlEditor control for editing HTML content.

How does it work (internal goodness)?

The new ASPxRichEdit has some intricate code that our team been working on for almost a year. Check out some of the many pieces that go into making a complex, fast, and powerful control like the ASPxRichEdit:

New JavaScript text engine

We've developed a new JavaScript text processing engine specially for the ASPxRichEdit control. And this engine controls everything in the document editing process including: model manipulations, layout calculations & presentation, selection processing, history, clipboard, input operations, and client-server model synchronization. Yes, it's a does a lot and it does it efficiently too. Take a look one of the ASPxRichEdit demos in 14.2 (coming soon).

Server & client-side in harmony

The ASPxRichEdit control has a unique server-side setup that differs from classic ASP.NET controls. The server part of ASPxRichEdit control doesn't generate the (HTML) rendering. Instead, the ASPxRichEdit interacts with the document file by reading its' content, sending JSON representation of the model to the client-side, and then applying changes from the client model to the original document.

Therefore, the Server and client objects work separately. And they communicate through JSON requests and responses via a special ASP.NET handler. So, when user changes the document on the client-side then the changes are all applied to the client model immediately. However,on the server side these changes are sent asynchronously and transparently to the end-user.

This setup results in an efficient and harmonious experience for the end-user because this communication does not have an effect on the UI performance. In fact, it helps give you a smoother experience overall.

Because the client-side object model is a big part of the ASPxRichEdit, let's take a look at it's two big parts: the layout engine and event processor.

Layout engine

The layout engine is the central piece the ASPxRichEdit's client-side object. The layout engine reads the document model and then transforms it to a layout for the end-user. The Layout engine does this by calculating each word from the model, measures its size, and places it in the layout: box after box and row after row.

Layout is very important for a rich text editor because it has to be accurate (WYSIWYG) and bad layout can effect performance. The layout engine also needs to take into account all existing settings of the document to create the correct layout. Things like: page size and margins, paragraph settings, tab stops, and section settings. This type of layout processing is not possible in standard HTML editors.

Event processor

The other side of the client control is the event processor. It controls all user actions, from text typing to mouse moving, and working with the clipboard. It captures user actions and transforms them to a set of commands. For instance, when user is moving the mouse with the left button pressed down then the event processor should determine the mouse cursor position relatively to the document model and call the SetSelection command. If mouse moving has started on a selected part of the document then it draws the dragging cursor pointer below the cursor and executes the MoveContent command when the user releases the mouse button.

As you can see, even a simple task can have a complex set of events associated with it and it's the event processor's job to read and execute them properly.

Canvas manager

The most visible part of the control is the canvas manager and its document rendering.

The canvas manager is responsible for what the end-user sees. The canvas manager essentially generates the HTML markup for layout representation, applies changes when the user interacts with the document, applies formatting commands, and is also responsible for scrolling. It also tracks all changes in the layout, determines what to show to the end-user, and finally draws the canvas (editable content of the ASPxRichEdit).

ASP.NET MVC support?

No, there is no ASP.NET MVC extension available in 14.2 release, however...

Yes, there will be an ASP.NET MVC extension when we release the final version of the ASPxRichEdit!

Available in the 14.2 release

Now that you're excited about this great new ASP.NET control, remember 2 things:

  1. It's a preview version (for now).
  2. And it's available in the 14.2 release.

What do you think about the new ASPxRichEdit control? Drop me a line below.

31 comment(s)

Wow, looks fantastic. Wish to have a theme that looks a little bit like the new Office for IPad Apps to make this control look a bit more modern and without using that much - often enough rare vertical space than the ribbon...

12 November, 2014

available MailMerge in 14.2?

12 November, 2014

I can't believe, but it finally happened!

13 November, 2014

Awesome 👍

Will it be possible to use "old" toolbar / menu to control?

Please try to provide office mobil theme for asp.net & winforms...

13 November, 2014

Heiko, thanks. It's possible to achieve that look. For example, the ASPxRichEdit does allow you to not display the Ribbon control or display an external one. But you're best bet would be to create custom items in the Ribbon. As for themes, I've create this suggestion which I recommend you track: https://www.devexpress.com/Support/Center/Question/Details/T173265

Thanks again.

13 November, 2014

Alexander,

No, we won't have mail merge functionality in the preview version but it will be there in the final version when we will release it next year. (Likely in v15.1).

13 November, 2014

Vlad, :-)

13 November, 2014

Tobias,

Not sure about the old toolbar/menu control but it's something we'll consider for the final release. As for office mobile theme, I recommend tracking this suggestion:

www.devexpress.com/.../T173265

13 November, 2014

Wow! Great. Will it support displaying rtf from PC that has pictures embedded as OLE objects? I suppose not--too much to expect:)

14 November, 2014

good stuff. long awaiting.

14 November, 2014

Very well.

Use doc, docx and other format?

14 November, 2014

It's now an incredible suite! hope u r already in mind to have snap functionality in future version!!!! great work. U only need a diagram and ms project like gantt control to beat them all!

16 November, 2014

Very nice!!! What about a suite for presentation like powerpoint? Do you have any plans for that?

17 November, 2014

Fantastic and (echoing Mike and Mauro above)......add Visio (diagram), Project (Gantt), Powerpoint and OneNote controls for total World Domination!

18 November, 2014

Hi Domenico, Yes, we support all popular rich text formats: DOCX, RTF, TXT, XML, ODT, EPUB, MHT, and DOC.

19 November, 2014

Sanjay, Thanks!

OLE object could be saved in a document file in different ways by MS Word. ASPxRichEdit will show images if an OLE object contains its image representation in a document.

19 November, 2014

Excellent control, wish it were here already. Btw - does it support saving / exporting to PDF?

20 November, 2014

Hi Richard,

Thank you! Yes, it supports export to PDF.

23 November, 2014

Hi Mauro,

I'm not sure about a presentation control, but I think we will discuss it :)

23 November, 2014

Excellent Control.

shall I pass data to the document?

2 December, 2014

I'm really impressed with this control. We've been using the HTMLEdit control for a while which does do a good job, but some of our customers want page layout control. This will allow us to offer that too.

I'll probably wait until table support and mailmerge are in there before using it in my application but the CTP is still very useful for enabling me to get working on the integration now.

5 December, 2014

Very Good.

But it don't support right to left language.

Do you have any plans for that?

5 December, 2014

Shahab,

Most DevExpress ASP.NET controls do support RTL:

documentation.devexpress.com

Thanks.

27 December, 2014

that is right Most DevExpress ASP.NET controls do support RTL.

But in Text Editor  when use RTL the words that are Left to Right become Tumultuous And when use LTR the words that are Right to Left become Tumultuous.

As a whole I can't combine RTL and LTR word together in one document.

I Hopes that this bug Resolved in main release.

4 January, 2015

Shahab,

Thanks for the feedback. We will look into it before the release of the RichText editor.

5 January, 2015

Thanks for your attention

7 January, 2015

Excellent job!

When did you plan to publish ASP.NET MVC feature of ASPxRichEdit

23 January, 2015

Thanks Fabio,

We need to first finish the ASPxRichEdit control and get the first release ready. But we are planning to have an MVC version soon after that.

23 January, 2015

Any update on the MVC version?

Any demos on how to use it on an aspx page inside a gridview?

9 April, 2015

Joe,

An MVC version is coming in a future release.

For the help with embedding the ASPxRichEdit into a GridView, please contact our excellent support team and they can help you:

www.devexpress.com/.../Create

Thanks.

9 April, 2015

Joe,

An MVC version is coming in a future release.

For the help with embedding the ASPxRichEdit into a GridView, please contact our excellent support team and they can help you:

www.devexpress.com/.../Create

Thanks.

9 April, 2015

Please login or register to post comments.