HTML Editor Components

Introduction

Recently I needed to embed a rich text editor in a number of web applications. The editor needed to fulfil a number of basic requirements which included:

  • Can embed images
  • Can extend the toolbar to include an “Insertable Field” select list
  • The output must be persisted as HTML
  • Must integrate nicely with ASP.Net MVC

Since I have a Developer Express Universal Subscription which includes two ASP.Net editors for MVC, I immediately included both in my shortlist. 

Next, I considered two of the most commonly encountered editors, TinyMCE and CKEditor. Since the applications are commercial, the licencing costs for either was prohibitive. Furthermore, my experience of using these editors embedded in open source products such as Umbraco and Wordpress has not been particularly good so they were excluded.

I have previously used an excellent client side editor called Froala. I found it to be brilliant all round but I needed a redistributable licence, the cost of which was prohibitive and thus it was excluded.

Finally, since the web applications all use Bootstrap, I included Summernote another client side editor licensed under the MIT License and thus freely distributable.

DX Rich Text Editor

This is a very powerful editor, capable of standing as a fully-fledged word processor. It is described as a “Word inspired rich text editor” and certainly has a Microsoft Office feel about it. The latest version (17.1.3) includes “floating objects”, this provides one of the previously glaring omissions, wrapping text around images. Supported file formats are DOC, DOCX, RTF, HTML, MHT, XML, ODT, EPUB and TXT so it fulfils the requirement to output HTML. The toolbars are fully customisable and there is an extensive API provided for both server and client side.

Although it is provided as an MVC extension, MVC integration is far from straightforward. In order to support the DX call-back mechanism, the editor must be provided in a partial view which does not contain any further HTML. Editor content can be provided as a byte array from the model and the partial view should be contained within a form to allow server access to the editor content for persistence. One other slightly odd feature is that the editor caches content by default. Initially this lead me to believe that the editor was working fine however, following discussions with DX support it turns out that if you persist the editor contents as HTML then floating objects does not work!

There was a possible workaround for the HTML problem which would mean saving as (say) DOCX and then, when the content was required, using the non-visual editor component to convert the persisted data to HTML.

DX HTML Editor

This is a server based editor control which looks very similar to other common editor controls. I have used this control previously but found some issues with it such as dropping odd characters when typing and struggling with some fairly complex document layouts. However, like all DX products it is under continuous improvement and the latest version did not appear to suffer from these issues.

Integration with MVC again required the use of a partial view but was generally a bit more straightforward than the Rich Edit Control.

The content is always HTML so there was no issue with persistence however as is often the case, the HTML it generates is not nicely formatted.

During UI testing a number of problems became apparent. 

The next problem was encountered when using MS Edge browser. After a page load, use Ctrl-A to select everything. When you release the keys, everything unselects! This problem appears to be just linked to MS Edge.

The next problem was concerned with selected text and was quite intermittent. I used an Ipsum Lorem generator and pasted a few paragraphs into the editor. The pasted text shows as highlighted (or selected) text. You cannot deselect the text by clicking in the editor. The only way to deselect it was to reformat a part of the text.

Finally, it does not provide justified text, you can left, right justify or centre text but you do not appear to be able to fully justify text.

Summernote

Summernote is described as a “super simple WYSIWYG editor on Bootstrap”. In fact, it is a highly functional product which compares extremely well with any of the HTML editors I have considered.

Unlike the previous 2 editors, Summernote is a client side product written in Javascript. Integrating it into a project is as simple as adding a css and javascript file, binding your model to a textarea and initialising the editor with a line of javascript.

Summernote has an extendable API, adding a toolbar item is very straightforward. Modifying styles, fonts etc. is equally straightforward.

Being an “HTML” editor, you do of course have access to adding your own attributes to anything you are editing by switching to code view. The HTML code generated is reasonably simple but is not formatted.

There’s not really much more to say about Summernote, it works nicely, it’s extendable, it’s simple to use and it’s free!

Conclusion

So then, which is the best and which did I use? I can’t honestly say any of the three is the “best”, it depends on what you need. 

DX Rich Text Editor is far and away the most functional but if you need a simple editor for blogging or similar then the chances are you need the output in HTML. If you need to wrap images in your text then it’s probably not for you.

DX HTML editor works well enough, out of the box it has a comprehensive range of features and it is not hard to integrate in an MVC application. The missing justification is not so good and the strange problems encountered with the UI encouraged me not to use it in anything but the most basic of applications.

Summernote is simple to use, not tied to .Net in any way and provides a good set of features out of the box. I haven’t found any negatives for it yet.

I ended up using Summernote in one application, DX HTML Editor in another and Froala in the third!


Category:Programming
Tags:Component,Editor,Html,MVC
Created:22 April 2017