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.
When using the justify or the indent plugin, CKEditor will by deafult use inline css.
There is no way to change this behavior in the WYSIWYG UI as not all editors will support this.
Tho, its a pretty easy fix to implements this. All we have to do is to alter the settings before its processed.
I have made some example code here. I dont know where the best location for this is, but for now I have my own module called "no_text" which is almost the same as "ns_text".
/**
* Implements hook_wysiwyg_editor_settings_alter()
*/
function no_text_wysiwyg_editor_settings_alter(&$settings, &$context) {
// CKeditor can use classes instead of inline css when using the justify
// plugin and the indent plugin.
if ($context['editor']['name'] == 'ckeditor') {
// As we want to insert classes instead of inline css, we most have the
// classes defined in a css file.
// If the css_settings in the WYSIWYG profile isn't defined as "none" go
// ahead and add the css file and the alter the $settings array.
if (isset($context['profile']->settings['css_setting']) && $context['profile']->settings['css_setting'] != 'none') {
// Use justify classes instead of inline css.
$settings['justifyClasses'] = array(
'align-left',
'align-center',
'align-right',
'align-justify',
);
// Use indent classes instead of inline css.
$settings['indentClasses'] = array(
'indent-1',
'indent-2',
'indent-3',
'indent-4',
);
// Add basic default styles to all themes. To override this, just override
// them in your own theme css file.
$settings['contentsCss'][] = base_path() . drupal_get_path('module', 'no_text') . '/no_text.css';
}
}
}
/**
* Implements hook_init().
*/
function no_text_init() {
// This is a very ugly solution for adding this css, but I can't find a better
// way at the moment.
drupal_add_css(drupal_get_path('module', 'no_text') . '/no_text.css', array('group' => CSS_SYSTEM));
}
The CSS is very easy.
/* CKEditor justify styles */
.align-left { text-align: left; }
.align-center { text-align: center; }
.align-right { text-align: right; }
.align-justify { text-align: justify; }
/* CKEditor indent styles */
.indent-1 { margin-left:3em; }
.indent-2 { margin-left:6em; }
.indent-3 { margin-left:9em; }
.indent-4 { margin-left:12em; }
Comment | File | Size | Author |
---|---|---|---|
#2 | inline_classes-1676712-2.patch | 2.14 KB | anon |
Comments
Comment #1
fabsor CreditAttribution: fabsor commentedI guess the ns_text module is the right place for this then?
Comment #2
anonComment #3
fabsor CreditAttribution: fabsor commentedAlright, this makes sense since aligning doesn't work at all if we don't do it this way. Commited.