Posted by jshock on January 18, 2012 at 7:03pm
This shouldn't be that hard. How do I add a custom class to the CKEditor dropdowns? I want editors to be able to select blocks of copy, and using CKEditor's Paragraph Formatting or Styles dropdown, apply a block div. I've been searching various forums and documentations sources and I find all kinds of references to config.js, ckeditor.styles.js, CKEditor plugins, etc. These appear to add inline or block-level styles -- not classes. I get the impression there is more than one way to accomplish this, however I can't find a clear, step-by-step howto. Does anyone have a bookmarked link or something that explains how to do this?
Comments
I have the same problem
I am using CKEditor with WYSIWYG module. I tried changing sites/all/libraries/ckeditor/plugins/styles/styles/default.js and that has no effect. I could not figure out where CKEditor got the list of styles.
Any help will be most appreciated.
I have this working on my site.
Here are some resources...
https://docs.google.com/document/d/1BJfL0tx6eLJyQ2bvjpeTCREjaPsLKRzs78mj...
Thats a basic overview of improving WYSIWYG which discusses what you want to do among several other topics..
Then there is this patch you can apply with gives ckeditor in Drupal the ability to have different tags in the font style dropdown.
Patch: http://drupal.org/node/746524
Make sure to have the font style dropdown enabled in 'Buttons and plugins' at wysiwyg/profile/#/edit (# is your individual setup's number for that profile
.. Also in this location you want to open the CSS section and add in your 'custom' CSS classes. Mine are:
title=h2.node-title
subtitle=h3.node-subtitle
section=h4.node-section
image left=div.img-left
image right=div.img-right
container=div.clearfix
Mine differ slightly from the ones in the tutorial.
They have to be set up in your css file(s) I have them in wysiwyg.css AND my themes theme.css file:
h2.node-title /* wysiwyw */
....
Hope this gets you started down the right path..