2

Certain rich text contains the following HTML:

<p class="indent">paragraph text</p>

in Text formats and editors for CKEditor, I have added the following line to the styles dropdown:

p.narrow|Narrow Paragraph

While editing the rich text, if I select the paragraph and click "Narrow Paragraph" in the styles dropdown, the HTML becomes:

<p class="narrow">paragraph text</p>

Is there a way to set up a class definition in the styles dropdown so that the class is added to any existing classes if it doesn't exist or removed if it does exist? In other words, in the example above, I would like the outcome to be

<p class="indent narrow">paragraph text</p>

Another click on "Narrow Paragraph" with the same paragraph selected would switch it back to

<p class="indent">paragraph text</p>

Can this be done?

2
  • 2
    CKEditor 4 or 5? Drupal 9 supports CKEditor 5 and Drupal 10 will be switching to CKEditor 5, which has a different architecture than v4, so it would be helpful to note this in the question. Sep 3, 2022 at 7:46
  • Thanks @Patrick Kenny. I'm on Drupal 9 using CKEditor version 4. I have added the version to the title of this question. Sep 3, 2022 at 16:46

2 Answers 2

3

No. The styles combo dropdown doesn't allow for multi-select (which your desired result would require).

If you want to stick with the styles combo dropdown, the only way to accomplish what you want is to simply add another style with both classes:

p.indent|Indented paragraph
p.narrow|Narrow paragraph
p.indent.narrow|Narrow indented paragraph

For further extended use cases, you can't use the styles combo plugin, but have to create/use a custom CKEditor plugin/module providing multiple buttons for the toolbar (one per CSS class, similar to the "bold", "italic", ... buttons of the fonts plugin), or a modal dialog with a custom multi select element/checkboxes for each CSS class.

I didn't test the custom plugin mentioned in the following CKEditor stackexchange question, but it attempts to provide the desired functionality by replacing the styles combo dropdown:

https://stackoverflow.com/questions/43680918/stylescombo-plugins-with-multiple-class-selection

If you want to test it with your installation, you need to create a Drupal module that will register the plugin to the Drupal CKEditor. Explaining how to do this surely exceeds the scope of this question. But an example How-To can be found on this external site.

1
  • Thanks very much for your response @Mario Steinitz. Using styles with multiple classes is what I've been doing, but it's becoming unwieldy as I begin to have more combinations, such as indent+narrow+shaded. I'll take a look at the stackoverflow article you mention. I'm experienced with custom modules, so no problem there if I decide to try the plugin. Sep 9, 2022 at 13:55
1

I was asking myself the same question. It seems that someone did a plugin for that, see https://stackoverflow.com/questions/43680918/stylescombo-plugins-with-multiple-class-selection.

His plugin can be downloaded at https://webutler.de/download/ckeditor_plugins/ (the link in his stackoverflow post is broken)

I didn't have the time to test it though. Please share your outcome in case you test it.

1
  • Thanks @ChennyStar. It sounds promising. We have begun the move to CKEditor 5 now and are creating our own buttons. Almost nothing required in terms of conversion 4 to 5 and we've been able to do everything exactly how we want to do it. I'll leave this item up in case someone else comes looking, but it's no longer an issue for us. Nov 30, 2022 at 17:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.