Creating interactive content in CKEditor with VisualN Embed (Video)

Posted on: Tue, 10/23/2018 - 10:47 By: kpv

In the video below we will show you how to create an interactive and informative content based on a couple of xls files and a handful of images using just CKEditor wysiwyg.

It takes just 4 and a half minutes to create the page. Using generic development workflow it would take hours.

ckeditor to content screenshot

Our goal is to create a demo article with info on emperor pinguins, containing an interactive chart, a map and a gallery. For that we are using just functionality provided by VisualN modules pack (with a couple of generic dependencies).

* Actually opening and closing dialog window before embedding a drawing is not really required - drawings can be embedded at saving clicking 'Save and embed' or updating the list clicking 'Update list' and then the 'Embed' button. Though there is a Drupal core issue that should be fixed.

The structure of xls files is as follows (the last screenshot also represents images used):

Excel file containing colonies demo data Excel file containing colonies demo coordinates Images for colonies demo gallery
pinguin colonies demo data pinguin colonies demo coordinates pinguin colonies demo gallery

Each xls file contains a plain data table. The first row is used for data keys. Generally it can contain any keys - remapping is shown in the video. Actually remapping is required only for the first demo_data.xls file, since data_coords.xls keys already coincide with those used by LeafletMapBasic drawer.

The configuration steps and other details are subject for upcoming articles series.

All the drawers used in the video are provided with the VisualN contrib module. You can also see them in action based on generated sample data at Also it serves as an example of using different resource types (i.e. generated data instead of xls file) with the same drawer showing how flexible and resource-type agnostic drawers are.


Upcoming series:

  1. Getting started
  2. Using available drawers preview
  3. Creating visualization styles
  4. Creating drawing (entity) types
  5. Creating interactive content in CKEditor with VisualN Embed
  6. Configuring VisualN Embed integration with CKEditor
  7. Using VisualN Excel module for Excel files support
  8. Sharing embedded drawings across sites
  9. etc.

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.
CAPTCHA This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.