CKEditor Format Menu Hacks

I'll go on record to say that I love the new CKEditor in Jadu.  I had a strong dislike for Xhina, and embrace this change with both arms, well done guys.

CKEditor is a great editor because of its configurability.  Jadu exposes some of these option in the editor setup with the CMS in Utilities | Document Editor Privileges. 

There comes a time when your users may need a bit more tweaking to the editor display.  We had such as case here.  It was simple really, change the Format selection by removing H1,H4,H5,H6 to list only H2 and H3, since H1 is in the page template, oh yea, and rename those to "heading" and "subheading"

Under normal circumstances (you've downloaded and implemented it yourself), the editor has a main configuration file - config.js.  Jadu changed this to allow for the "injection" of some PHP code, so the file we'll be editing is located here



To change the format dropdown, you (re)set the config.format_tags to add / remove items

    //Default Values
    //config.format_tags = 'p;h1;h2;h3;h4;h5;h6;pre;address;div'
    config.format_tags = 'p;heading;subheading;pre;address;div';

I've removed h1,h4,h5,h6 from the default values.  You'll also notice I've renamed h2 and h3 to 'heading' and 'subheading'.  This text does not change what is displayed in the editor, it just gives us a "non default" hook so we can setup the editor behavior.

To actually rename the items, we do this

    config.format_heading = { element : 'h2', name: 'heading' };
    config.format_subheading = { element : 'h3', name: 'subheading' };

We hook the changed heading and subheading by adding


The XX is the text we used in the format_tags list.

Then we set those to the HTML element we want to set in the editor, along with the name we want to project into the dropdown list.  I did notice issues with spaces, I didn't play around long enough to figure out what to do if you wanted say "Sub Heading" listed, maybe you use _ or something like that, not sure.

You're probably asking "Where do these changes go?" 

In our cc_config.php file, you'll see a line that looks like this one

config.toolbar = <?php print $toolbar;?>;

we want to insert our 5 lines of code (or 3 if you leave off the comments)  right before this line. Save the file and refresh a page with the content widget in it, and you should see your changes appear.

Be aware, when you perform a Continuum update, these will get wiped out, but if you're like me, you've created a set of .patch files to apply all of your core mods after each update ;-)

General Concept: 
Jadu Product: 
Jadu Version: