Products

Solutions

Resources

Partners

Community

About

New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

The Community Blog is a personal opinion of community members and by no means the official standpoint of DNN Corp or DNN Platform. This is a place to express personal thoughts about DNNPlatform, the community and its ecosystem. Do you have useful information that you would like to share with the DNN Community in a featured article or blog? If so, please contact .

The use of the Community Blog is covered by our Community Blog Guidelines - please read before commenting or posting.


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

Comments

Sacha Trauwaen
Nice post Daniel.

But, if you chose for TinyMCE, i have to learn to html editors to the end users :(

Difficult chose ...
Sacha Trauwaen Thursday, January 14, 2016 6:35 PM (link)
Tony Henrich
Nice posts but I disagree at multiple levels.

- I know you're a big fan of Angular but why the stance against jQuery? if you're adamant about an editor not using third party JS libraries, this should hold true for Angular also. No jquery... and NO Angular instead of I prefer no Angular.

- jQeury is bloated? angular.min.js is 125k while jquery-2.2.0.min.js is 84k. In these days where the average web page size is over 1.5M and js files are served from browser cache, this is a non issue. jQuery size is less than 5% of ONE page size. Heck it's smaller than many images.

- Today jQuery celebrates 10 years and is more popular than ever. http://ejohn.org/blog/10th-anniversary-of-jquery. It drives more than 77% of top web sites. Also today jQuery 3.0 beta was released. I am not here to defend jQuery. I am saying it's still very relevant. Use the right tool for the right job... whether jQuery, Angular or no third party js libraries. They all serve a good purpose.

- Many CMS users are not technical. They don't know html and css. They want to paste from Word documents at work into CMS's like DNN. They don't care if the output html or css is garbage, clean or conforms to the latest standards. All they care about is that the documents looks good and are formatted properly. They are not html/css purists like some of us. If a WYSIWUG editor does the job, that's all what matters. They want to get their job done and move on with their day. Fast performance, mobile friendly, minimal bloat.. are not in their mind.

- I think DNN is more appropriate than WordPress for use in a business environment so the fact that WordPress uses TinyMCE which uses nodejs can be irrelevant. When I compare a tool, I look at the whole picture. Which one serves my users the best. Not which one is using the latest cutting edge technologies. Why should I care about nodejs. DNN doesn't use it. Maybe CKEditor has better support for pasting from Word (http://ckeditor.com/addon/pastefromword). That's a big plus for my users and probably wins them over. If I tell them it doesn't support nodejs.. huh? what? What is nodejs? Is it a feature in the editor that I can use?

Anyway.. nice ideas and effort. Maybe you can start an open source effort to use TinyMCE and DNN will have more html editor options.
Cheers from USA :)

Tony Henrich Thursday, January 14, 2016 7:16 PM (link)
Daniel Mettler
@tony thanks for your thoughts - here are mine to fill the gaps

- basically jQuery does very little, that modern browsers don't already do. So in most cases it's an unnecessary overhead not just at load but also at runtime. I wrote more about it here http://2sxc.org/en/blog/post/good-bye-jquery-you-were-awesome - so it solves problems which are not usually a problem any more, and promote a hacky-style of development which simply doesn't scale. By trending away from it, I'm automatically forcing myself and my team to architect better.

- Angular is - at this time - one of the best development frameworks which also forces you to architect well. It's my current favorite, and runs the entire 2sxc-UI, so for now it's set. But if someone else develops another tool, they may choose a different framework and build upon that.

- right tool for the right job - absolutely. and jQuery ist still very relevant in the DNN page itself - there is almost no other way to simply add hover-buttons etc. But it's a lot like static methods in C# - it's viral. Once you start developing that way, more and more features end up having late-wiring and the same quick-fix-style of development. So yes, for many aspects it's the best way to go for now - but mainly because of our history, not because of our future.

- WYSIWYG - yes, the copy/paste is one of the most important issues of all. And it's important to guide the user to best practices. A wysiwyg with a "integrate-flash" button will be used. So such buttons shouldn't exist.

- Wordpress not relevant - basically I was able to choose from two excellent products - TinyMCE and CKEditor. Both can do the job - it was just a question of tipping the scale. My users will never hear of this decision - they will just get a working solution and be happy :).

Greets from the Helvetic Confederation (that's what CH stands for),
Daniel
Daniel Mettler Friday, January 15, 2016 4:42 AM (link)
Daniel Mettler
@Sacha I'm almost done with a (IMHO) very, very good integration - check out my next posts. I believe the user will not even feel the WYSIWYG, because it just works (not like Telerik). Basically I think you won't have to train him at all - your only problem will be, that the user will drop a PDF on the CK-WYSIWYG and expect it to link automatically, and it won't work there :).

But if we're honest - most users have very little contact to the WYSIWYG except for content-scenarios. And these should all have the same WYSIWYG, I agree with that.
Daniel Mettler Friday, January 15, 2016 4:46 AM (link)
Sacha Trauwaen
Surely, drop a PDF or images on the WYSIWYG editor will be appreciated by and users.
Sacha Trauwaen Friday, January 15, 2016 6:19 AM (link)
Tony Henrich
@Daniel I want users to know that what you post are your own personal opinions. Something like 'jQuery is dead' or 'good bye jQuery' is not a fact but it's how you based your future JS development will be. In fact I consider these titles to be somehow misleading and I advice users to think carefully before making a decision based on an article they read. I help do this by replying to these types of posts. Therefore I am not replying to you directly but I am posting facts and opinions for everyone to read so they make a more informative decision.

- jQuery offers a standard way for selecting elements, doing ajax calls, promises, unobtrusive form validations, templates, tons of plugins... etc without worrying about browser inconsistencies. That makes the developer more productive with less buggy code. While modern browsers are incorporating some of these functions built-in, that doesn't mean something like jQuery suddenly becomes obsolete. jQuery still has many advantages. There are still inconsistencies in how browsers implement standards. jQuery gets updated periodically by removing features that are not needed anymore. That's why there are 1.x and 2.x branches. If the site doesn't care about older versions of IE, it can use the slimmer 2.x code. There's the migrate plugin which helps in migrating.

- Want to use plain vanilla javascript only, more power to you. It will take more code and effort to do it everything at a lower level.

- Angular is best for SPA type of apps which heaving data binding using models and views. Most web sites do not fall under this category. Angular uses jQuery under its covers. Some Commercial web UI frameworks like DevExpress use jQuery for Ajax calls. This is a testament of the usefulness and reliability of jQuery.

- Does it make sense for parts of DNN to use one editor and others (using 2sxc) to use another editor? This will confuse users and they won't like it. You have two options. Make TinyMCE better than CKEditor in DNN and DNN might adopt it. Fix the issues of CKEditor which DNN standardized on. Both are open source.

- I find these X is better Y arguments to be counterproductive when both X and Y are good. Like a Porsche owner tells his BMW buddy that his car is a better car. Both cars are very good cars and both take the person from point A to point B comfortably.

Cheers
Tony Henrich Friday, January 15, 2016 1:34 PM (link)
Daniel Mettler
@tony - I share most of your opinions :) +1

We're living in a time where DNN has a lot of old-school history - so much in fact, that it's almost impossible to renew. Old-schoolers tend to stay on their own path, and newbies tend to duplicate work of the previous generation. I'm absolutely convinced that DNN will die if we don't change this.

I'm very happy about everybody who has an informed opinion - even if it's not identical to mine. What I'm afraid of is people who simply work in copy-existing mode.

When we started 2sxc in 2011, the general opinion was "who needs this" and "we already text/html" and "we also have form and list" - no joke! People believed that a wysiwyg-component and an old, XSLT-based tool were "part of the distribution - so it must be the way to work". People said things like "why don't you help make that better - instead of doing your own thing" - and they never realized that the paradigms behind old tools are often something you cannot build on any more. We actually tried it - and failed.

The same thing applies to the current wysiwyg strategy in DNN - it focuses on the editor as a standalone tool instead of as part of a solution. Most of what will make the tinymce solution so appealing won't work for a generic wysiwyg-component. It is impossible to just strap unto a text html, because the DNN-content-strategy is wrong.

I'll have to rephrase that - DNN doesn't have a content strategy.

With 2sxc, DNN got a got content strategy. And this strategy is not a component, it's a strategy. So it's impossible to just plug unto an existing component - too much is missing there and would never guide the user behavior.

But fortunately it doesn't matter - because when people use 2sxc, they will not give their users the text/html any more. So yes - the host-user / system-admin will have a second wysiwyg - one optimized for content, one as a general component. But that's ok - IMHO it's actually the way to go.

BTW: Today, 2sxc has proven that it fills an important gap, more and more. So much so, that DNN-Corp will create a clone called DCC someday. It should deliver similar functionality - albeit separate and incompatible. They too could have opted to build upon a proven solution - and somehow decided against it. I agree that this will cause a lot of confusion - much more that just a wysiwyg-clone. But I'm afraid this "you have two options" is necessary to push the stack forward :( - and to continue giving free features (otherwise DNN corp would only put the cool stuff into Evoq).

Thanks for commenting - I really appreciate such discussion!
Daniel Mettler Sunday, January 17, 2016 4:49 AM (link)
Mark Merrick
I've been researching a replacement editor for CK Editor in DNN and that led me here. It's a good editor but our experiences with TinyMCE inside of 2sxc have spoiled us a bit. I love that editor and the implementation you did there Daniel. Thanks for this article and your deep thinking on the subject. My ideal would be to steal your TinyMCE editor implemenation and drop it in as a replacement for DNN editor in general (HTML module etc.). But I imagine there would be a lot to that. Research is just starting so we'll see where this goes.
Mark Merrick Saturday, November 11, 2017 3:09 PM (link)

Comment Form

Only registered users may post comments.

NewsArchives


Aderson Oliveira (22)
Alec Whittington (11)
Alessandra Daniels (3)
Alex Shirley (10)
Andrew Hoefling (3)
Andrew Nurse (30)
Andy Tryba (1)
Anthony Glenwright (5)
Antonio Chagoury (28)
Ash Prasad (37)
Ben Schmidt (1)
Benjamin Hermann (25)
Benoit Sarton (9)
Beth Firebaugh (12)
Bill Walker (36)
Bob Kruger (5)
Bogdan Litescu (1)
Brian Dukes (2)
Brice Snow (1)
Bruce Chapman (20)
Bryan Andrews (1)
cathal connolly (55)
Charles Nurse (163)
Chris Hammond (213)
Chris Paterra (55)
Clint Patterson (108)
Cuong Dang (21)
Daniel Bartholomew (2)
Daniel Mettler (181)
Daniel Valadas (48)
Dave Buckner (2)
David Poindexter (12)
David Rodriguez (3)
Dennis Shiao (1)
Doug Howell (11)
Erik van Ballegoij (30)
Ernst Peter Tamminga (80)
Francisco Perez Andres (17)
Geoff Barlow (12)
George Alatrash (12)
Gifford Watkins (3)
Gilles Le Pigocher (3)
Ian Robinson (7)
Israel Martinez (17)
Jan Blomquist (2)
Jan Jonas (3)
Jaspreet Bhatia (1)
Jenni Merrifield (6)
Joe Brinkman (274)
John Mitchell (1)
Jon Henning (14)
Jonathan Sheely (4)
Jordan Coopersmith (1)
Joseph Craig (2)
Kan Ma (1)
Keivan Beigi (3)
Kelly Ford (4)
Ken Grierson (10)
Kevin Schreiner (6)
Leigh Pointer (31)
Lorraine Young (60)
Malik Khan (1)
Matt Rutledge (2)
Matthias Schlomann (16)
Mauricio Márquez (5)
Michael Doxsey (7)
Michael Tobisch (3)
Michael Washington (202)
Miguel Gatmaytan (3)
Mike Horton (19)
Mitchel Sellers (40)
Nathan Rover (3)
Navin V Nagiah (14)
Néstor Sánchez (31)
Nik Kalyani (14)
Oliver Hine (1)
Patricio F. Salinas (1)
Patrick Ryan (1)
Peter Donker (54)
Philip Beadle (135)
Philipp Becker (4)
Richard Dumas (22)
Robert J Collins (5)
Roger Selwyn (8)
Ruben Lopez (1)
Ryan Martinez (1)
Sacha Trauwaen (1)
Salar Golestanian (4)
Sanjay Mehrotra (9)
Scott McCulloch (1)
Scott Schlesier (11)
Scott Wilkinson (3)
Scott Willhite (97)
Sebastian Leupold (80)
Shaun Walker (237)
Shawn Mehaffie (17)
Stefan Cullmann (12)
Stefan Kamphuis (12)
Steve Fabian (31)
Steven Fisher (1)
Tony Henrich (3)
Torsten Weggen (3)
Tycho de Waard (4)
Vicenç Masanas (27)
Vincent Nguyen (3)
Vitaly Kozadayev (6)
Will Morgenweck (40)
Will Strohl (180)
William Severance (5)
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out