Quick CKEditor Pull Quote Plugin

02 Mar 2018

I use CKEditor 4 a lot as a rich text editor instance in my projects. In particular the widget API is brilliant for allowing me to write widgets that allow admin users of my sites the freedom to create all sorts of flexible, rich layouts inside their editor instances without having to ask me to build any specific templates. I've written a few in particular that have a bunch of user-configurable options, via dialog box, for creating some really interesting content specific to various projects, Arteye in particular used a few, and Elly Jahnz made some nice scrapbook-style layouts using them. I'll share some of those at a later date. For now though, as time is short, I just wanted to share this simple one having just made it for use by Elementum Journal. It's a very straightforward widget, with no user configurable options, for inserting a pull quote into the flow of an article. 

It has no dependencies other than the CKEditor 4 widget plugin. You can download a zip file for the widget package itself here with the toolbar icon. Drop it into your CKEditor plugins folder and include, at a minimum, the following into the config.js file:

config.extraPlugins = 'widget,pullquote';


..and download the required widget plugin here.

The plugin itself is dead simple - defines a button for the toolbar that inserts an <aside>  that can be used inside an <article> and subsequently styled however you like.