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.