Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.The idea is to make it easier for content managers, restricting them to choose a CSS class between a preconfigured list.
This feature is already available using the WYSIWYG module (see screenshot https://groups.drupal.org/files/ckeditor-css-config.png)
I'm not sure if there is already a contrib solution for these (based on http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Styles for example).
Does anybody know the best approach to achieve this?
| Comment | File | Size | Author |
|---|---|---|---|
| #2 | dropdown.png | 89.48 KB | Pere Orga |
Comments
Comment #1
Pere OrgaComment #2
Pere OrgaAdding a screenshot of what I'm talking about
Comment #3
kaldimar CreditAttribution: kaldimar commentedPere you can create your own custom list of styles as a Javascript object and add it to one of your CKEditor profiles by following these steps:
1- Copy sites/all/modules/contrib/ckeditor/ckeditor.styles.js to your theme's script folder.
2- Customize the object to fit your needs: replace the styleset name to any string other than 'drupal', and follow the default structure and comments or refer to http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Configuration/Styles
3- Go to admin/config/content/ckeditor and edit the profile you want to modify. Under the "EDITOR APPEARANCE" fieldgroup, drag the Styles button from "Available buttons" to "Current toolbar", positioning it wherever you want.
4- Finally, go to the "Custom JavaScript configuration" textarea under the "ADVANCED OPTIONS" fieldgroup, and tell CKEditor about your custom styleset name and path to the file defining it:
config.stylesCombo_stylesSet = 'STYLESET_NAME:path/to/custom/ckeditor.styles.js';Example:
config.stylesCombo_stylesSet = 'my_styles:/sites/all/themes/my_theme/js/ckeditor.styles.js';You can then export those settings to a feature. Hope it helps.
Comment #4
Pere OrgaThanks!