CKEditor Custom Styles - How to apply multiple classes to the same element

Permalink April 10, 2019 at 4:58 PM

Hi All,

I have two custom styles set up in my page_theme.php, as follows:

array(
              'title' => t('Image Full Width'), 
              'element' => array('img'),
              'attributes' => array('class' => 'image-full'),
              'forceBlock' => 1
           ),
           array(
              'title' => t('Image Border Bottom'), 
              'element' => array('img'),
              'attributes' => array('class' => 'border-bottom'),
              'forceBlock' => 1
           ),

Which work great when applied individually. However, I need to apply BOTH of those classes to the SAME img element. This currently does not work. When "Image Full Width" is applied and then I apply "Image Border Bottom" the original class is overwritten and only the latest one is applied.

I have read through this documentation by the great MrKDilkington:https://documentation.concrete5.org/tutorials/adding-ckeditor-custom... and unless I'm missing something in there, I don't believe it mentions how to accomplish what I'm going for here.

The situation is a bit more broad than this as well, I would like the "Image Border Bottom" class to be able to be paired with about 4 other similar img element styles I have set up.

Any help would be greatly appreciated. Thanks.

mnakalay replied on Apr 11, 2019 at 2:14 pm Permalink Best Answer Reply

Unfortunately, this is not a Concrete5 issue. The problem comes from CKeditor, the editor used by Concrete5. It's actually a feature request on their site but not built yet.

In the meantime, you can do something like this

array(
  'title' => t('Image Full Width'), 
  'element' => array('img'),
  'attributes' => array('class' => 'image-full'),
  'forceBlock' => 1
),
array(
  'title' => t('Image Border Bottom'), 
  'element' => array('img'),
  'attributes' => array('class' => 'border-bottom'),
  'forceBlock' => 1
),
array(
  'title' => t('Image Full Width & Border Bottom'), 
  'element' => array('img'),

Viewing 15 lines of 18 lines. View entire code block.

 
array(
  'title' => t('Image Full Width'), 
  'element' => array('img'),
  'attributes' => array('class' => 'image-full'),
  'forceBlock' => 1
),
array(
  'title' => t('Image Border Bottom'), 
  'element' => array('img'),
  'attributes' => array('class' => 'border-bottom'),
  'forceBlock' => 1
),
array(
  'title' => t('Image Full Width & Border Bottom'), 
  'element' => array('img'),
  'attributes' => array('class' => 'image-full border-bottom'),
  'forceBlock' => 1
),