Problem/Motivation
After upgrading to CKEditor5, I was fighting a lot with the confusing new split style dropdown. In contrast to CKE4 and what our content editor are used, we have two dropdown boxes in CKE5. With one you can only select between P, H1, H2, ... This is the headings dropdown. And then there is a style-dropdown where you can switch various classes ("styles") on or off. So it requires a lot of clicking to get e.g st.h like "h1.important" etc. Especially weird is that you can combine multiple classes "h1.important.red" etc. This is not always desirable. Thus, not only for compatibility but also usability reasons, I'd very much like to go back to the old days where you can just have a single dropdown.
— @rgpublic
Work-around if all you need is <h* class>: install https://github.com/rgpublic/ckeditor_custom_heading
Steps to reproduce
See above.
Proposed resolution
- ✅ Wait for https://github.com/ckeditor/ckeditor5/issues/14372👈 Please vote with a 👍 on this issue to increase its priority for the CKEditor team: they prioritize based on demand!
- ❌
Allow configuring which specializations of "Heading" should be made available by using https://ckeditor.com/docs/ckeditor5/latest/features/headings.html#config...← This would lead to an inconsistent user experience, see #9 for details.
Remaining tasks
- Wait for upstream feature.
- Add test coverage.
User interface changes
Can convert e.g. a <p> to <h2 class="fancy">.
API changes
None.
Data model changes
None.
Release notes snippet
The usability of the "Style" dropdown in CKEditor 5 has improved significantly: plain paragraphs can be converted directly to a heading, blockquote, etc. with a particular class — rather than first having to convert to the appropriate tag first and then applying a class to it using the "Style" dropdown.
Original Report
After upgrading to CKEditor5, I was fighting a lot with the confusing new split style dropdown. In contrast to CKE4 and what our content editor are used, we have two dropdown boxes in CKE5. With one you can only select between P, H1, H2, ... This is the headings dropdown. And then there is a style-dropdown where you can switch various classes ("styles") on or off. So it requires a lot of clicking to get e.g st.h like "h1.important" etc. Especially weird is that you can combine multiple classes "h1.important.red" etc. This is not always desirable. Thus, not only for compatibility but also usability reasons, I'd very much like to go back to the old days where you can just have a single dropdown.
To me surprise, the problems I described are even mentioned in the CKE5 docs:
https://ckeditor.com/docs/ckeditor5/latest/features/style.html#known-issues
"At present, the style feature may clash with other features that bring in similar content (e.g. headings). Problems with overlapping styles applied to the same element may also occur."
I was even more surprised to find that there is an alternative to easily solve most of these problems:
https://ckeditor.com/docs/ckeditor5/latest/features/headings.html#config...
It seems you can just use the headings dropdown and omit the styles dropdown altogether and use that for the different styles. Almost like it used to be. Great. Only problem: There seems to be no configuration in the UI of Drupal whatsoever for this. The headings plugin of Drupal only allows to switch on/off H1,H2, etc. but not to configure different custom styles. This is really sad - so my feature request here is to allow configuring that feature in the future :-)