Oct 03 2014
Oct 03

WYSIWYG editors are the bane of my existence, yet they are a necessary evil if you have clients that want to edit their site content.

But somewhere between all the inline styles they create to editing source code, there simply had to be a solution that would let me open up my theme css to content creators. 

After much searching and testing, I have found that unicorn. 

CKEditor populates the style drop down menu with a js file, and it lets you override it. Problem is, as stated in the docs, it doesn't work. And there were a few various options posted in the CKEditor module issue queue. 

First off, you create a new js file to name a function that will build the drop down select items and the parameters for each. Contrary to what has been suggested in various posts, I put this in my theme's js folder. That way it won't get overridden by a module or library update, and it just makes sense since it's tied to my theme. Only CKEditor will be looking for this file, so there's no need to call it in your template files nor add it to your .info file. 

For example, I created a file named ckeditor_styles.js like so:
 

( function() {
    CKEDITOR.stylesSet.add( 'my_styles', [ // this is the styles set name you will call later
        { name: 'Teal Heading 2', element: 'h2', attributes: { 'class': 'teal' } }, 
        { name: 'Teal Text', element: 'span', attributes: { 'class': 'teal' } },
        { name: 'Unbold Heading', element: 'span', attributes: { 'class': 'unbold' } }
    ]);
} )();

It's pretty straightforward. The name parameter is what you will actually select in the drop down. The element is where you specify where to inject the class. If it's a block-level element (h1, h2, div, p, etc.), the class will added. If it's a span, then the selected text will be wrapped in a classed span. As for attributes, that's where you specify you are calling a class, and also provide the name of the class you want to inject. The resulting drop down will be split into block styles and inline styles.

The second step is to let CKEditor know where to find this file, via the advanced options section in the configuration. Navigate to admin/config/content/ckeditor and edit the profile you wish to add this to, most likely Full HTML. Docs will say you only need to set config.stylesSet, but as gleaned from the issue queues (and tested personally), you need to also set config.stylesCombo_styleSet.

Expand the Advanced Options field set and add the following to the Custom JavaScript Configuration with your styles set name and the path to your js file:

config.stylesCombo_stylesSet = 'my_styles:/sites/all/themes/mytheme/js/ckeditor_styles.js';
config.stylesSet = 'my_styles:/sites/all/themes/mytheme/js/ckeditor_styles.js';

Clear your caches and you should now be able to pick styles from your drop downs that will add either standard elements or spans with the desired classes. 

Sources:
http://docs.ckeditor.com/#!/guide/dev_howtos_styles
https://www.drupal.org/node/1287432

Oct 03 2014
Oct 03

At DrupalCorn Camp 2014, there seemed to be a fairly high number of camp organizers in attendance, so we held what I like to think of as a SuperBOF. I think we pulled four banquet tables together in order to fit everyone.

The purpose was to share pain points and just brainstorm camp stuff. Notes were taken and the doc is shared publicly here: http://bit.ly/drupal-camps

Most of the discussion was centered around information sharing and coordination of efforts and how to accomplish that. We had thought that creating a private group on g.d.o for organizers to share not-ready-for-prime-time information would work. Turns out, that's not the case, as "private" only means there is moderation on who can join, but all posts are fully public.

Why a private group? Well, mostly for shared contact lists, proposed dates for coordinated planning before announcements, things like that. The intent also is to publicly share as much knowledge as we can, but in a centralized place that's a little less cumbersome than g.d.o.

In addition, we created a #drupalcamp IRC channel, and you should totally join if you are a camp organizer. 

So stay tuned, add your name to the doc if you want to be included on the proposed quarterly meeting, and join the channel so collaboration can start now!

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web