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.

The perfect WYSIWYG for DNN/2sxc #6 - ADAM Integration

So after extensive evaluation (parts 1, 2 and 3) and integration and design (part 4 and 5) I really want to add value. It's time to integrated ADAM - the Automatic Digital Asset Manager.

What Users Want When Adding Files like PDFs

Adding a PDF and linking to this file should be super, super simple. Basically the user should type "please download" and then drag-drop the file from his PC directly into the WYSIWYG. That's what we strive for, nothing less. The user wants an experience that looks like this:

And adding images should work just like that too. To enable this, many things must be automated in the background - and just developing that takes a few days. This is the core reason we developed ADAM a few months ago (read about it in this blog).

Integrating ADAM

ADAM 1.0 was already well prepared for this but we needed a few more features for 2sxc 8.1 like folders and file-metadata, which were already ongoing projects. So basically all we needed now was:

  1. Integration of the adam-browser with the WYSIWYG
  2. DropzoneJS integration to allow drag-drop on top of the WYSIWYG
  3. Automating of link / image-tag generation after drop
  4. Automation of link / image-tag generation when selecting a previously uploaded file

ADAM File Browser

As ADAM already existed as a AngularJS Directive, this was fairly easy. We still had to make various improvements like callbacks (to allow linking it when selecting a file) and some new icons (for PowerPoint, vCard, etc.), but the rest was easy.

ADAM Image Browser

The Image Dialog already existed and works just like the File Picker, but of course should only show images, and will create an tag instead of an tag.

DropzoneJS Integration

This was actually more complex than I thought. Originally I tried it when TinyMCE was in an Iframe and that failed completely. But in Inline-Mode this worked well, and TinyMCE has an option to disable its own upload-handler, which helped make this possible. Now the entire area is drop-able (with multi-upload), and after the upload a link or img is auto-generated.

Awesomeness :)

This is the way asset management should work. Users rarely care about folder structures and hate clicking their way through any kind of subsystem. ADAM lets users do everything very quickly and efficiently.

I'm actually not done yet - the integration still needs mode-change (basic user, advanced user), some more context-oriented buttons (remove link, align image) and i18n. I'll do that within the next few days but won't blog about every detail. So far I've invested a good 4+ days and till I'm done I'll probably total 6 days. But I believe that these things make a difference - I hope you do too :)

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



Love the 2sxc module and I'm looking forward to the WYSIWYG update.

If the user is referencing an item that is used throughout the site, would they just need to be trained to use the DNN file picker for that and use ADAM for new one-off items in order to avoid lots of duplicate items?
jacton Tuesday, January 19, 2016 1:20 PM (link)
2sic Daniel Mettler

This should be decided on a case to case basis. For example, if a specific image is really a "standard" image, then it should be in the dnn file picker. If it's just used a few times - but doen't need central-overwrite-the-image function, then I would duplicate the image. Here's an example:

When I create a new App, I need the same screenshot in the catalog and in the blog. But I really, really want to duplicate this image, because I want to treat the blog as an own entity without dependencies on the app-catalog.

On the other hand if I link to some pdf-contract-template from many places, I would not duplicate it.
2sic Daniel Mettler Tuesday, January 26, 2016 11:56 AM (link)

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 (22)
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 (270)
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?