Learn More





DNN Community Blog

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 #4 - Basic Integration and Design

After evaluating over 50 editors and deciding to give TinyMCE a try, it's time to integrate it into 2sxc as a replacement for Telerik. Turned out to be easier than I thought…

Initial basic integration

Steps to integrate

  1. Add JS dependencies to the CDN of TinyMCE 
  2. Add AngularJS UI-TinyMCE plugin to connect TinyMCE to AngularJS  
  3. Create a Formly-Component to show this 

This was fairly simple and done in about 2 hours. This is what it looks like:

Shortcomings of the Initial Integration

Loads of stuff isn't quite ready for production yet. Let's review them:

  1. Uses an Iframe to show the content for editing. This causes extra difficulties when future features are needed. 
  2. The editing section is inside another scrolling section - this just sucks
  3. The default toolbars are just way too much…
  4. …and don't fit the blue color scheme of 2sxc
  5. Many features like adding links, images, source-code etc. don't work yet
  6. Toolbar has too many advanced features visible
  7. Feature to edit source code is missing
  8. Scripts all loaded, even if not used - needs lazy loading
  9. Can't pick a dnn-page
  10. Can't pick a dnn file
  11. Not integrated with ADAM

Next Priorties

My next priority is to ensure that critical things work. I'll assume that colors and toolbars will be customizable with various degree of work, but I don't know if I can integrate ADAM, DNN-pages and DNN-files.

Going Inline and Initial Styling

Going inline is very important for various reasons which would take too long to describe. But TinyMCE is equipped to do this fairly easily, so I enabled inline…

…and then styled our toolbars, which now float when you click anywhere…

…and follow you wherever you scroll…

Enabling The Right Features by Activating TinyMCE Plugins

Turns out that many basic features like adding links, images, breaking links or even viewing code is each in optional subsystems. Researching these, enabling them, figuring out each configuration etc. took more than a days work. The basic set I choose to integrate was:

  1. Autolink
  2. Code
  3. ContextMenu
  4. Tabfocus
  5. Image
  6. Link
  7. Paste (for word pasting)
  8. Anchor (to insert a link-target anchor)
  9. Charmap
  10. Hr
  11. Media
  12. Nonbreaking (to insert an  )
  13. SearchReplace
  14. Table

To understand them better you can read the TinyMCE documentation

Toolbar Clean-Up and Context-Sensitive Toolbar

This was quite a challenge - and took me over a days work to get it all as perfect as possible. The toolbar had to be very, very small (to not be scary) and additional features had to appear as the context demanded. 

Next Steps

So far I invested about 2.5 days and things are looking good - but we're far from done. The next steps are fairly complex, especially related to asset management (images, documents), dnn integration for page linking, different modes for different users etc. I'll post them separately…

Love from Switzerland,

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


There are currently no comments, be the first to post one.

Comment Form

Only registered users may post comments.


2sic Daniel Mettler (124)
Aderson Oliveira (15)
Alec Whittington (11)
Alex Shirley (10)
Andrew Nurse (30)
Anthony Glenwright (5)
Antonio Chagoury (28)
Ash Prasad (21)
Ben Schmidt (1)
Benjamin Hermann (25)
Benoit Sarton (9)
Beth Firebaugh (12)
Bill Walker (36)
Bob Kruger (5)
Brian Dukes (2)
Brice Snow (1)
Bruce Chapman (20)
Bryan Andrews (1)
cathal connolly (55)
Charles Nurse (163)
Chris Hammond (203)
Chris Paterra (55)
Clinton Patterson (28)
Cuong Dang (21)
Daniel Bartholomew (2)
Dave Buckner (2)
David Poindexter (3)
David Rodriguez (2)
Doug Howell (11)
Erik van Ballegoij (30)
Ernst Peter Tamminga (74)
Geoff Barlow (6)
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 (268)
John Mitchell (1)
Jon Henning (14)
Jonathan Sheely (4)
Jordan Coopersmith (1)
Joseph Craig (2)
Kan Ma (1)
Keivan Beigi (3)
Ken Grierson (10)
Kevin Schreiner (6)
Leigh Pointer (31)
Lorraine Young (60)
Malik Khan (1)
Matthias Schlomann (15)
Mauricio Márquez (5)
Michael Doxsey (7)
Michael Tobisch (3)
Michael Washington (202)
Mike Horton (19)
Mitchel Sellers (28)
Nathan Rover (3)
Navin V Nagiah (14)
Néstor Sánchez (31)
Nik Kalyani (14)
Peter Donker (52)
Philip Beadle (135)
Philipp Becker (4)
Richard Dumas (22)
Robert J Collins (5)
Roger Selwyn (8)
Ruben Lopez (1)
Ryan Martinez (1)
Salar Golestanian (4)
Sanjay Mehrotra (9)
Scott McCulloch (1)
Scott S (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)
Timo Breumelhof (24)
Tony Henrich (3)
Torsten Weggen (2)
Vicenç Masanas (27)
Vincent Nguyen (3)
Vitaly Kozadayev (6)
Will Morgenweck (37)
Will Strohl (163)
William Severance (5)
Try Evoq
For Free
Start Free Trial
a Demo
See Evoq Live
Need More Information?