Find a post...

DNN-Connect Blogs

Perfect WYSIWYG for DNN/2sxc #3 - Evaluation Short-List

The long list

To find out what to evaluate I went through google and focused on lists assembled by others, as any really relevant editor for me must have a wide adoption so would appear on these lists. I found lots! of editors and many I didn't even catalog because they were too trivial, too old, only-one-guy using it, etc. Here's my long list

  1. Froala WYSIWYG
  2. PunyMCE, from the authors of TinyMCE
  3. NicEdit
  4. WysiHat
  5. widgEditor
  6. WYMeditor
  7. jWYSIWYG
  8. ggEdit
  9. YUI Rich Text Editor
  10. uEditor
  11. Loki
  12. MooRTE
  13. WMD – Markdown Editor
  14. goog.editor
  15. lwrte
  16. wkrte
  17. jHtmlArea
  18. TinyEditor
  19. dijit.Editor
  20. CLEditor
  21. Wysihtml5
  22. WYSIWYG
  23. Redactor
  24. SimpleHtml5Editor
  25. bootstrap-wysiwyg
  26. rataeditor
  27. summernote
  28. Quill
  29. Trumbowyg
  30. Squire
  31. Aloha Editor
  32. TinyMCE
  33. CKEditor (next generation of FCKeditor)
  34. elRTE
  35. Mercury Editor
  36. Raptor Editor
  37. SnapEditor
  38. Hallo
  39. Morrigan jQuery Editor
  40. Medium Editor
  41. jQTE
  42. FresherEditor
  43. KendoUI
  44. Markitup
  45. Xinha
  46. jQuery Notebook
  47. Line-control
  48. Textbox.io
  49. Alloy Editor
  50. WHISHTML5
  51. ContentTools
  52. Textangular

First Short-List

Basically by applying my core management criteria (see post 2) like Open-Source / free, reasonable license, regularly maintained etc. I could short-list to the following:

  • summernote
  • Quill
  • Trumbowyg
  • Squire
  • Aloha
  • TinyMCE
  • CKEditor
  • RaptorEditor
  • Medium
  • Textangular
  • WHISHTML5
  • ContentTools

Second Short List

I then tried them more in detail and also removed the ones which look great but don't have a wide adoption yet. This is tough as some like the Trumbowyg or ContentTools look really cool - but if you've worked with WYSIWYG for so many years you've learned that WYSIWYG is never really simple - there are thousands of micro-issues cross-browser or paste-from-you-don't-know where and these must all be solved. This only happens on widely used tools. I had high hopes in Aloha since there is also a commercial edition, but it too disappointed in real life. Some editors like the Raptor also got removed because they still pursued the old mix-design-with-content paradigm which is dead. So my second short-list is:

  • Summernote
  • TinyMCE
  • Quill
  • Medium

Final Short List: TinyMCE, CKEditor, Troumbowyg, Summernote

Again I filtered some more, based on library dependencies (jQuery causes unnecessary bloat + version conflicts if you have many components using it) and similar. Summernote had to go (jQuery), as did Quill and Medium. CK editor got back because the DNN strategy is now focused on it. In the meantime troumbowyg matured and got back on the list - but just as a backup plan. So here's my final list, in order of preference:

  1. TinyMCE 4.3+ (my favorite by far)
  2. CKEditor (alternative / backup plan)
  3. Troumbowyg (as backup plan)
  4. Summernote (if all else fails)

Conclusion: 4 Days to Discover the Obvious

It's a bit scary to say that I spent more than 4 days to evaluate something, just to arrive at the conclusion that the obvious answers (TinyMCE and CKEditor) were the best options. The more I tried the alternatives - which often appeared much more elegant - the more I discovered the old WYSIWYG flaws I thought were gone in modern implementations.

Why TinyMCE before CKEditor?

I think it's fair to say that both editors can be made to do what we need - and both have a very wide adoption across various platforms. Both can easily do all the simple stuff like bold, italic and more. Comparing numbers in GitHub, Downloads, Google-Trends doesn't help much either, as they all seem very similar. So basically either choice is valid.

What tipped the scale for me were five things:

  1. TinyMCE is the editor in Wordpress, so it's used in around 7+ million blogs and some websites. This is something to rely on, so that no matter what bugs appear, they will be fixed - even the tiny unimportant ones! 
  2. TinyMCE 4 underwent a large refactoring in 2013 so it's "clean" again and dropped support for older browsers. It's also built with modern methodologies like AMD and nodeJS. This is a very good thing.
  3. CKEditor is being integrated into DNN by default but IMHO in such a way that I don't want to rely on it. The current paradigm is still the WYSIWYG = content-management and building on this is difficult. If I remove a bad-practice feature, people would demand it back and I don't have the energy required to explain why it shouldn't be there 
  4. Since many features have been activated which shouldn't be, these will have bugs and need maintenance. For features which shouldn't be there - that's too high a cost…
  5. …and some features rely heavily on asp.net in the current implementation. Another no-go I don't want to build upon if I don't have to.
     

So in summary the fact that many DNN-people already use CK-editor the IMHO wrong way adds a very high "cost" both in getting people to use it the right way and in terms of unnecessary legacy load. On the other side I have a very modern, cleaned up, widely used editor without these problems which is at least comparable in everything I need. So it's a clear case for TinyMCE.

Next steps - Integrate

In the next steps I'll integrate it into 2sxc and see how it goes and if TinyMCE is as good as it should be…

Love from Switzerland,
Daniel


Daniel Mettler grew up in the jungles of Indonesia and is founder and CEO of 2sic internet solutions in Switzerland and Liechtenstein, an 20-head web specialist with over 800 DNN projects since 1999. He is also chief architect of 2sxc (see forge), an open source module for creating attractive content and DNN Apps.



Read more posts by Daniel Mettler
Daniel Mettler learned programming with the bible translation computer of his parents, deep in the jungles of Indonesia. Since he was only 12 years old at that time and the BIOS only had a version of BASICA, that's what got him started. With 16 he went back to Switzerland and learned German and basic city-survival skills. Equipped with this know-how he founded 2sic internet solutions in 1999 which was focused on web solutions on the Microsoft platform. After a few self-developed CMSs 2sic switched to DNN in 2003 and has been one of the largest partners (17 employees, 700+ projects) in Europe. Daniel is also the chief architect behind the open source 2sxc, a strong promoter of standardization (boostrap, patterns, AngularJS, checklists, etc.) and loves to eat anything - dead or alive. His motto: if the natives eat it, it game.
Comment(s)

Hosting liberally provided by

Geoff Barlow 513 4
Philipp Becker 5882 7
DNN-Connect 430 6
Peter Donker 4836 27
Christopher Hammond 659 2
Olivier Jooris 405 1
Daniel Mettler 11823 88
Clint Patterson 1 1
Jos Richters 65 1
James Rosewell 289 2
Will Strohl 1519 27
Ernst Peter Tamminga 407 4
Barry Waluszko 2411 2
Declan Ward 288 1
Gifford Watkins 721 9
Torsten Weggen 2270 3