Help your WYSIWYG help you: Creating custom CKEditor Widgets

Timeslot: 
Saturday, 2:15pm - 3:15pm
Track: 
Coding and Development
Experience Level: 
Intermediate

Presentation slides and example code for this presentation are available: https://github.com/ten7/ckeditor_widgets

Because your editors want more than headers, lists, and P tags.

I haven’t yet met the developer who really loved her WYSIWYG editor. HTML can be fragile, like a delicate flower, and manipulating it with your WYSIWYG interface is like gardening with boxing gloves. Until recently, there was a rule for dealing with custom HTML structures within your WYSIWYG, and that rule was: don’t.

But this is beginning to change. The release of CKEditor 4.3 last November introduced Widgets into the mix, which the official CKEditor blog describes as "special rich content units in that they are groups of elements which are treated as a single entity inside the editor.”

Drupal 8 will ship with CKEditor as its default WYSIWYG, and includes a nifty image-with-caption tool created using CKEditor Widgets API. But we don’t have to wait for Drupal 8. In this session, we’ll explore how to create custom widgets now in your Drupal 7 sites.

Learning Objectives & Outcomes: 

Participants will learn about the advantages of CKEditor Widgets over alternative implementations. We'll discuss the structure and components of a custom widget implementation, and look at two code examples: a sidebar-style textbox, and an accordion widget.

To get the most out of this session, you should have some familiarity with Javascript.

Platinum Sponsors

Gold Sponsors