Visual Studio Toolbox

8 Rich Text Editors for Interactive Web Content

Web pages aren't read-only anymore. These rich text editors let users post content of all kinds, edit content and even write collaboratively within the browser.

• By Terrence Dorsey
• 01/15/2016

Maybe I'm going out on a limb with this one, but it seems to me that rich text editors represented an important step forward in moving the World Wide Web from a broadcast-oriented, publisher/programmer-focused endeavor to an interactive, content-remixing medium where we can extend and build upon each other's expertise and inspiration. No, really.

Think about it: At one time, content had to be built into a Web page by a programmer ... or at least a writer with some technical expertise in HTML markup. Later we got the ability to submit plain text back to the server, which might build a new page with the new content.

The state of Web content editing changed significantly with the release of Internet Explorer 5.5, in 2000, which introduced the designMode and contentEditable attributes. DesignMode made the entire document editable, while contentEditable made a specific element (and its child elements) editable. Users could edit the text within an editable element or page, and the browser also provided API hooks for commands that enabled features like bold or italic styling, adding links, and so on (see Figure 1).

Microsoft included this functionality in Internet Explorer with the intention that developers could use it to develop rich text editors, and they did. These features were popular enough, in fact, that they were rather quickly reverse-engineered and added to competing browsers.

For some interesting background on this history, see Mark Pilgrim's "The Road to HTML5: contentEditable" post at The WHATWG Blog. There's brief-but-straightforward documentation for Content Editable over at Mozilla Developer Network, and an interactive ContentEditable demo at HTML5 Demos.

(If you're interested in more Internet Explorer history like this, I highly recommend listening to the "Leader of the Internet Explorer Project, Ben Slivka" episode of Brian McCullough's excellent Internet History Podcast.)

With those historical notes out of the way, let's take a look at a few of the rich text editors available to you today.

ProseMirror
An interesting new project to create a conentEditable-based, collaborative rich text editor is ProseMirror, and I think it's a project worth keeping an eye on. First, ProseMirror (Figure 2) is the latest open source effort by Marijn Haverbeke, whose previous projects include the interactive online tutorial and print book, "Eloquent JavaScript" and the browser-based code editor, CodeMirror (which I discussed previously in the May 2014 column, "25+ Tools for Cross-Platform Code Editing and Collaboration").

Like most of the editors I'll discuss here, ProseMirror is a library for creating in-browser, HTML-based text editors. What's different about ProseMirror? While it uses contentEditable, the underlying document model is not HTML. Instead, Haverbeke is creating an extensible, semantic document model based on the CommonMark implementation of Markdown.

In addition, ProseMirror is being designed from the ground up as a collaborative online editor. The library has built-in hooks for storing local changes, sending document changes over the wire (using your transport of choice), handling conflicts, supporting multiple levels of undo and more. Check out the ProseMirror Collaborative Demo for a hands-on look at how it works, then read Haverbeke's "ProseMirror" overview essay and "Collaborative Editing in ProseMirror" deep dive into the mechanics of coordinating changes between multiple users.

Aloha Editor
After all that talk about contentEditable, it's important to point out that not all rich text editors use that approach today. In fact, Aloha Editor does not use it at all! Instead, it provides a simple, lightweight (142KB), JavaScript library giving you a fast editor that you can integrate into your Web projects. The advantage of not using contentEditable is that you don't have to worry about the details of browser support and implementation. Just plug in Aloha Editor and go.

Another key feature of Aloha Editor is a focus on sophisticated handling of copy and paste from Microsoft Word, which can be a huge boost in productivity. Truly what you see is what you get. There's a beautiful interactive demo on the Aloha Editor site so you can try it for yourself.

The project is open source and distributed under GPL2 license. Commercial licenses are available, as well.

DevExpress ASP.NET HTML Editor
DevExpress offers an ASP.NET HTML Editor provided as both a Web Forms Control and an MVC Extension. The editor supports both HTML markup editing and more traditional word processing functionality, including spellcheck, tables, mail merge placeholders, and document import and export (rich text, Office Open XML (.docx), HTML, Open Document and PDF). You also get totally customizable toolbars, menus and shortcuts, custom CSS, and more.

ASP.NET HTML Editor is part of the DevExpressASP.NET subscription. A free trial download is available.

MediumEditor
There are a several well-executed attempts to create an open source inline editor like the one used by Medium.com, but the most popular currently seems to be MediumEditor (Figure 3). It's a lightweight (5KB), pure JavaScript library that's easily integrated into your project and simply pops up an editing toolbar when users highlight editable text on a Web page.

MediumEditor is themeable, supports custom events and has an extension API. Existing extensions include support for image upload, tables, Markdown, custom HTML and more. The best documentation for getting started is right in the readme file in the medium-editor GitHub repository, and there's an interactive MediumEditor demo.

Dave Winer of Scripting News fame used MediumEditor as the basis of his MyWord Editor service. And while we're crossing subject streams, Winer's Fargo OPML-based outliner also uses contentEditable under the covers.

Raptor Editor
Raptor Editor is another contentEditable-based, HTML5 WYSIWYG editor that uses jQuery under the hood (see Figure 4). It provides a hybrid inline/toolbar editing approach, and extensive customization of the toolbar commands including support for multiple UI languages.

One very interesting feature of Raptor Editor is a built-in revision browser within the editor. For any editable feature on the page you can view previous revisions and roll back to a previous state.

Raptor Editor is an open source project licensed under GPL3: You can fork the raptor-editor GitHub project and use the code or make contributions. You can also Purchase a commercial use license if GPL licensing doesn't meet your project requirements.

Rich Text Editor
Another option for ASP.NET developers is Rich Text Editor for ASP.NET and MVC, which has been around for a long time and boasts excellent browser compatibility across Windows, Mac and Linux environments. The customizable UI will be familiar to Windows and Office users, and Rich Text Editor includes built-in support for clean copy and paste from Word docs.

The Rich Text Editor feature list is long and impressive. It includes the usual suspects -- themeing, multi-language support, clean HTML generation, table editing and more -- but one unique item that caught me eye was W3C WAI and section 508 accessibility for users with disabilities. Accessibility in your Web site is not just the right thing to do, it's often a legal requirement for government contracts!

You'll find an interactive demo up on the Rich Text Editor site, along with a trial download, excellent documentation and license pricing.

Telerik RadEditor
RadEditor for ASP.NET AJAX is the rich text editor offering from Telerik, included as part of the Telerik UI for ASP.NET AJAX and DevCraft component packages.

You get a default Office-like editing toolbar just from dragging RadEditor onto your project. Content filters, validation and toolbars are all customizable. Themes, media managers ... the list goes on and includes both client and server APIs for handling commands.

There's a separate AccessibleEditor component that provides accessibility features and, according to Telerik, this component was "selected by the Royal National Institute of Blind People for their new accessible website."

One nifty feature I hadn't seen touted by other rich text editors is touch event support for mobile browsers.

Check out the RadEditor Demo pages on the Telerik site.

Syncfusion RichTextEditor
Would you be surprised if I said Syncfusion Essential Studio for ASP.NET MVC includes a full-featured RichTextEditor control? Probably not.

Most of the usual features are provided including customizable toolbars, image, video, and file manipulation, table editing, localization, and left-to-right or right-to-left text, and more. You get full control over theming either with built-in themes or custom CSS.

The Syncfusion RichTextEditor control also includes integrations with Angular and Knockout, though the documentation is a little rough.

Check out the RichTextEditor Demo to see the default control in action and to take a look at some sample page source code.

Edit All the Things
That's just a sample of the many editing tools currently available that let users edit or create content on a Web page. You can even write your own rich text editor ... it's not really cutting-edge stuff. Fraser Cain shows one example in his article, "htmlArea Turn any TEXTAREA into a WYSIWYG editor," and you can even read the old MSDN tutorial, "How to Create an HTML Editor Application," for Internet Explorer 5.5 or later.

Or maybe you shouldn't. Nick Santos explains Why contentEditable Is Terrible and provides a mathematical proof. Which gets us back to Haverbeke's ProseMirror content model.

I hope there's something here that scratches your project's editing itch. If you have a favorite that I haven't highlighted, head down to the rich text editor below and send us a comment with your suggestions.