Discusses how to configure and implement custom CKEditor widgets in Drupal. Includes numerous examples of custom widgets and actual widgets that we use in CNN Travel site.
Note that you could also download the PDF copy of this presentation by clicking the Save/Download button. The PDF copy has far better quality than the one rendered here online.
1. CKEditor Widgets with Drupal
Engr. Ranel O. Padon
Kite Systems | http://github.com/ranelpadon
2. About Me
• Software Engineer at Kite Systems (Hong Kong-based company)
– full-time Drupal developer for CNN Travel (our client)
• part-time Python lecturer in University of the Philippines
• involved in Java and Python projects before
• plays competitive futsal
3. Topics
• Why give importance on contents?
• Why use a WYSIWYG tool and CKEditor?
• Why use widgets?
• How to create widget from scratch?
– Grouped Texts widget
– HERE Maps widget
• CNN Travel in-house widgets
– Inline Ads
– Inline Maps
– Service Info widget
• My personal project: Leaflet Maps widget
4. Why Contents?
• one of the best ways to drive traffic to your site
is to create valuable and interesting contents
• to create high-quality contents the editors must
have effective and high-quality tools
5. Why WYSIWYG?
• WYSIWYG (WhatYou See Is WhatYou Get)
Editors could be used to create/edit contents
directly in your web site
• eliminates the need to use a word document
processor(MS Word, LibreOffice Writer)
• boosts editor’s productivity
14. Why CKEditor?
• Has good support for common CMSes like
Drupal, WordPress, Django, etc.
• Default WYSIWYG Editor in Drupal 8!
15. Why CKEditor?
• Check-out xEditor 2.0 for in-place editing
of contents (Drupal module for live node
view editing):
https://www.drupal.org/project/xeditor
16. Why CKEditor?
• a redesigned version of FCKeditor
• created by Frederico Caldeira Knabben
17. Why Widgets?
• grouped CKEditor elements
• subclass of the Plugin class
• widget styling has a template
- could have a generic style for all widget
- could have specific style for specific via a
custom Dialog window
• widget is a drag-and-drop element, but as a group
• widgets could have multiple instances
18. Why Widgets?
• we use to inject spatial information in our
content using a customized Drupal’s Leaflet
module.
• we could display maps in Leaflet as a block
but it could be too limiting
• sometimes our editors write articles like
Top10 articles in Hong Kong and want to
insert the map alongside its content writeup
25. Custom Widget: Grouped texts
• Required Files
– grouped_texts/plugin.js
– grouped_texts/css/contents.css
– grouped_texts/icons/grouped_texts.png
ideas for this sample widget is obtained from the Simple Box widget from here:
https://github.com/ckeditor/ckeditor-docs/tree/master/guides/widget_sdk/tutorial_1
33. Custom Widget: HERE Maps
Workhorse Widget Files
• Plugin Core: Defines the plugin and attaches the
plugin to the CKEditor toolbar.
• Dialog Script: Displays the map options when
creating and editing existing maps.
• Map Iframe Renderer: Parses the map options via
URL and renders the map accordingly.
36. Custom Widget: HERE Maps
• Inserting the new HERE Maps widget; loads the iframe element
37. Custom Widget: HERE Maps
• Editing the HERE Maps widget (by double-clicking the handle bars that
displays in upper-left corner of the widget when you hover the mouse)
48. Custom Widget: HERE Maps
– specify the HERE Maps credentials, could be passed as URL params
also or store them in Drupal.settings object
49. Custom Widget: HERE Maps
– instantiate a new map using the specified map options via URL
(Latitude and Longitude parameters)
– you could include via URL other map variables like zoom level, map
center, etc
50. Custom Widget: Drupal Hook
the custom widgets could be registered in Drupal using
hook_ckeditor_plugins:
58. CNN Travel Map Widget
• maps could show one or more places
• maps could have various dimensions
• maps could have the specified alignment
• could show nearby TripAdvisor places
• popups should be styled similar to
TripAdvisor
• preserves the last zoom level state
– via mouse scroll zoom events
61. CNN Travel Map Widget
• Node Edit mode
• shows the Options tab and the auto-
complete search functionality
• uses Twitter’s TypeAhead API and
fetches live data from TripAdvisor’s servers
62. CNN Travel Service Info
• CNN Travel Map widget plus other add-ons
• shows one Place only
• focuses on custom texts and TripAdvisor data
– user ratings/reviews
– booking info
63. CNN Travel Service Info
• Node Edit mode (Hong Kong’s Insider Guide article)
http://travel.cnn.com/destinations-insider-guide-hong-kong-954446
http://travel.cnn.com/destinations-insider-guide-hong-kong-954446
65. CNN Travel Service Info
http://travel.cnn.com/destinations-insider-guide-hong-kong-954446
66. CNN Travel Service Info
http://travel.cnn.com/destinations-insider-guide-hong-kong-954446
• the widget
showing the
TripAdvisor
reviews
67. CNN Travel Service Info
http://travel.cnn.com/destinations-insider-guide-hong-kong-954446
• the widget
showing the
HERE Maps
section
68. Challenges We Encountered
• iframes are notoriosly slow, for contents with
lot of map widgets, the page takes too long to
fully load
• we refactored our widget implementation
and converted the map iframes to ordinary
divs, and treated the main page as the main
iframe for all the widgets
69. Challenges We Encountered
• we further optimized the widget rendering by
rendering them only as needed or as the page
scrolls
• so if the widget is not currently visible in the
viewing area, the widget will be not rendered
yet
74. CKEditor leaflet Maps
• has good code base (with ample inline code
comments) when you want to develop
custom widgets
• includes installation guide that could be useful
in installing CKEditor and/or plugins/widgets
in Drupal:
https://github.com/ranelpadon/ckeditor-leaflet/blob/
master/Installation%20Guide.txt
75. Recommendation
• take time to read the much improved and
comprehensive documentation (includes
useful links to related resources) and
familiarize yourself to the valuable APIs:
– http://sdk.ckeditor.com
77. Special Thanks
• CNN Travel (http://travel.cnn.com) for
allowing me to share what we are working on.
• HERE (http://here.com) for sponsoring my talk.
78. What did you think about the presentation ?
Leave your feedback and
help us improve Drupalcamp on :
http://2014.drupalcebu.org/