ckeditor5 cannot switch between heading with class paragraph with style or other block elements with class let alone styled spans
- ckeditor 5 Drupal styles classes multiple elements
- CKEditor5 style can only be applied if block element already present
- CKEditor 5 change p to block element styles
- CKEditor5 styles h2 disabled allowed in source editor
- drupal ckeditor5 definition list
- drupal ckeditor5 advanced format heading.options
- ckeditor 5 stylable headings:
Solution!?
https://github.com/rgpublic/ckeditor_custom_heading
Via rgpublic in Allow CKEditor 5 to create a <h2 class="something">
directly
(The module did not work when i tried it.)
That overall approach, custom headings see below, is one good answer: if you want a single list showing all options at once.
Ended up going with the approach of hiding inapplicable styles, so what you get is a list of block types (H2, paragraph, etc) and then you can apply any relevant styles to them— seems a little better than having H2, H2 green, H2 blue, H3, H3 green, H3 blue etc all in one list.
Here is my CSS for that:
/* Hide style previews. */
.ck.ck-style-panel .ck-style-grid .ck-style-grid__button .ck-style-grid__button__preview {
display: none !important;
}
/* Hide group labels. */
.ck.ck-style-panel__style-group .ck.ck-label {
display: none;
}
.ck.ck-style-panel .ck-style-grid .ck-style-grid__button {
height: auto !important;
border: none !important;
}
.ck.ck-style-panel .ck-style-grid .ck-style-grid__button .ck-button__label {
height: auto !important;
line-height: inherit !important;
padding: 10px !important;
}
.ck.ck-button.ck-style-grid__button.ck-off.ck-button_with-text,
.ck.ck-button.ck-style-grid__button.ck-on.ck-button_with-text {
min-height: auto;
border-radius: 0;
}
/** Hide disabled styles from dropdown grid. */
:root .ck.ck-style-panel .ck-style-grid .ck-style-grid__button[aria-disabled="true"] {
display: none;
}
/* tighten up the whitespace in the style grid, and convert it from a grid to a list, to make long lists of styles more scannable: */
/** Show style panel in a list instead of a grid, and tighten whitespace */
:root .ck.ck-style-panel {
padding: var(--ck-spacing-small);
}
:root .ck.ck-style-panel .ck-style-grid {
--ck-style-panel-columns: 1;
--ck-style-panel-button-width: 360px;
--ck-style-panel-button-height: 80px;
column-gap: var(--ck-spacing-small);
row-gap: 0;
}
:root .ck.ck-style-panel .ck-style-grid .ck-style-grid__button .ck-style-grid__button__preview {
padding: 0;
}
:root .ck.ck-style-panel .ck-style-grid .ck-style-grid__button .ck-style-grid__button__preview * {
padding: var(--ck-spacing-small);
margin: 0;
}
You put this in a CKEditor5-specific stylesheet that you can put in your regular, front-end, non-admin theme with two lines in your theme’s *.info.yml
:
ckeditor5-stylesheets:
- css/ckeditor5-tweaks.css
based on a fantastic answer from James Wilson in Drupal’s Slack, https://drupal.slack.com/archives/C01GWN3QYJD/p1699445645695819?thread_ts=1698795564.505889&cid=C01GWN3QYJD
There is a feeble workaround for this. Clearly not ideal though: Create all the styles you want and apply them to the HTML tags that you want.
h2.green|Green H2
h3.green|Green H3
h4.green|Green H4
h5.green|Green H5
p.green|Green
li.green|Green list item
(Edited above to make clear that every label, annoyingly, has to be unique.
Hide disabled styles (i.e., the grayed out ones) from the UI with custom CSS.
/** Hide disabled styles from dropdown grid. */
:root .ck.ck-style-panel .ck-style-grid .ck-style-grid__button[aria-disabled="true"] {
display: none;
}
Optionally, tighten up the whitespace in the style grid, and convert it from a grid to a list, to make long lists of styles more scannable:
/** Show style panel in a list instead of a grid, and tighten whitespace */
:root .ck.ck-style-panel {
padding: var(--ck-spacing-small);
}
:root .ck.ck-style-panel .ck-style-grid {
--ck-style-panel-columns: 1;
--ck-style-panel-button-width: 360px;
--ck-style-panel-button-height: 80px;
column-gap: var(--ck-spacing-small);
row-gap: var(--ck-spacing-small);
}
:root .ck.ck-style-panel .ck-style-grid .ck-style-grid__button .ck-style-grid__button__preview {
padding: 0;
}
:root .ck.ck-style-panel .ck-style-grid .ck-style-grid__button .ck-style-grid__button__preview * {
padding: var(--ck-spacing-small);
margin: 0;
}
Other people running into the problem:
(The “upstream bug” that is marked fixed i don’t think would have helped anyone; if you are in one type of element you still cannot select the style of any other type, so you have text you want to turn into a certain type of list like the original poster and you feel you cannot because those list styles are grayed out— you have to know to first select list, and then the styles for lists are unlocked. The upstream bug just ensures that there is some way to get there, that list items are technically allowed in the format, not that there will be an intuitive way or even a button to make the list item, and so enable the style.)
Again, telling people when switching styles in CKEditor5 doesn’t work at all was the big fix for Drupal: [Style] Add tests for inability to apply styles to , , , etc. in CKEditor 5 — and allows applying it to all elements [#3326261] | Drupal.org
Meanwhile over in CKEditor 5 land, documentation does not address this limitation head-on:
https://ckeditor.com/docs/ckeditor5/latest/features/style.html https://ckeditor.com/docs/ckeditor5/latest/features/headings.html
One workaround is custom headings:
Which is what rgpublic did as noted above.
This would be an improvement:
And this would make the styles dropdown work like CKEditor4:
[Style] Style dropdown should insert (some) elements. · Issue #14372 · ckeditor/ckeditor5
Also raised as a workaround/approach to this: CKEditor 5 support for Content Templates [#3273358] | Drupal.org
The most basic things are so much harder than they should be.
- drupal see which version of ckeditor5
Thought this didn’t work, maybe it was the stack overflow answer that definitely didn’t work for CKeditor5 that i’m thinking about though https://www.thenoisyspider.com/how-to-find-ckeditor-version-drupal8.html
And then there’s embedding video and other media in CKEditor…
You have requested a non-existent parameter “ckeditor_media_embed_install”
Fixed on fully upgraded CKEditor5 versions i think.
Tangentially related, CKEditor5 Embedded Content | Drupal.org
Background
ckeditor5 - Drupal - 181 new items - Slack
Current experience with Drupal and CKEditor5:My list of h2.brand-color
, h2.secondary-color
, etc. styles does not work at all as expected.You are at a new line, and go to select “H2 brand color” and— it’s greyed out and you cannot select it? What? Why? You type your heading text, highlight it— and you still cannot tell this gosh-darned newfangled ckeditor to make your text into your special heading! (If your sitebuilder has helpfully removed the Heading plugin to use only the Styles plugin so it is less confusing, you are not able to get your heading at all without editing source. Not good.)This is a big missing piece that i’m not finding tracked in an issue of its own for Drupal (mentioned by the amazingly ubiquitous WimLeers in #3326261 as the non-critical piece) and on CKEditor has very little traction yet, [Style] Style dropdown should insert (some) elements. · Issue #14372 · ckeditor/ckeditor5.There are a couple ways we could go with this, and the best UX for a given direction is not necessarily compatible with a different direction.
- Scoped styles are the way to go, make changing between different block-level elements happen by going to the Heading listing, the ordered list, etc. and the Styles dropdown only applies classes (in general). In this case it would be best for the styles that do not apply to not be shown at all, rather than greyed out.
- “Styles dropdown applies classes, it does not change element types” particularly makes sense when the same classes, such as brand colors, can be applied to a broad range of both block level and inline elements.
- Particularly important styles for a particular type of element could be added to the selection options for those specific elements— at least configuring custom heading elements has documented support in CKEditor5 (this is the exact use case of the style list example i opened with
h2.brand-color|H2 brand color
), and we could add a Drupal UI in front of that. Not clear how well CKEditor5 supports the same with lists etc. though. - In my opinion for the best editing experience a site should choose one or the other ways of getting styles applied (either always in the selector for the element type, or always in a separate styles selector), and not muddle anyone’s brain by making them remember that heading styles are set one way and another style is set differently— but we can support both the above without a problem with the way CKEditor works, whereas the other approach below is at odds with the use of the styles dropdown suggested above.
- If a style exists, it is shown, and it always works. On a new line? You can select from the Styles dropdown and make it a heading or ordered list or anything that is defined in a style. In an existing pararaph, heading, or any other element? Switching to a style that has the element defined will convert the element you are on to the one in the style you select. (That is, we push for https://github.com/ckeditor/ckeditor5/issues/14372 )
Whichever approach we go for, it’s worth making a conscious decision and starting to go in that direction now. Sound about right? Thoughts on which way to go, or counter-arguments that this is a false dichotomy or there are still better approaches?
34 replies
You must first create a <h2>
, CKE5’s Style
cannot yet create new elements. Upstream issue: https://github.com/ckeditor/ckeditor5/issues/14372 /cc @Witek Socha
#14372 [Style] Style dropdown should insert (some) elements.
The main difference between CKEditor 4 and 5 in styling is the ability to insert and rename elements. CKEditor 4 added the elements from the Styles list like containers or headings:Screen.Recording.2023-06-12.at.11.57.40.movCKEditor 5 only allows styling when the cursor is in the element.Screen.Recording.2023-06-12.at.14.05.49.movPotential improvements are that styling will allow to insert/rename of some elements to allow for example insertion of div
s (rel: #13341).
Labels
type:improvement, domain:ui/ux, squad:core, package:style
Comments
2
ckeditor/ckeditor5 | Jun 12th | Added by GitHub
https://www.drupal.org/project/drupal/issues/3326261 added explicit test coverage for all reported use cases. Hence they’re all guaranteed to work
Drupal.org
Problem/Motivation Using a style ul.test|Test I would expect to be able to apply to lists but the styles dropdown is completely greyed out. This was working in CKEditor 4. Steps to reproduce Create a text format with a style. Add style ul.test|Test Create a page and in CKEditor create a list and see the style dropdown is greyed out. Proposed resolution Be able to apply styles to lists in CKEditor 5.
Dec 9th, 2022
But you must create the element first, then apply a style to it.
I think that’s the source of all your troubles. You’re right that this is different compared to CKEditor 4. But most sites have been using it in this way already anyway.
That’s why this is one of the few reports about the absence of that feature (and the very first very detailed report — thank you!)
Thanks for the detailed report, feedback, and suggestions! Being totally open, we don’t plan to focus on the style dropdown. Maybe it’s an area for open-source contribution from the Drupal side? Happy to collaborate.
Yeah, what i was trying to get at is that the current site builder and content editor experience is really rotten if you want three styles (classes) to be applicable to ten HTML elements (as evidenced by https://www.drupal.org/forum/support/post-installation/2022-11-30/how-do-i-configure-the-styles-dropdown-in-ckeditor-5 ), and that what we need to provide is:
- Pick element, and then pick style (without 20 greyed out style elements being shown) - needs the implementation of https://github.com/ckeditor/ckeditor5/issues/14206 EDIT: I think i mean more https://github.com/ckeditor/ckeditor5/issues/12770 “Hide inapplicable styles instead of disabling them”
or
- Pick from the 20 styles and let that force the element to change. (This could be implemented with https://github.com/ckeditor/ckeditor5/issues/14372 or with https://ckeditor.com/docs/ckeditor5/latest/features/headings.html#configuring-custom-heading-elements )
(edited)
#14206 Introduce unique, toggleable styles in the Styles plugin
ckeditor/ckeditor5 | May 22nd | Added by GitHub
#14372 [Style] Style dropdown should insert (some) elements.
ckeditor/ckeditor5 | Jun 12th | Added by GitHub
To maybe make the example really clear, it is very annoying both as a sitebuilder and a content editor that, given that i must use the Heading dropdown to set the element anyway, that i cannot then add a style to any element by setting the styles to this:
.green|Green .black|Black .black-dot|Black ● .blue|Blue
As the sitebuilder, whatever, i can copy all that onto h2
, h3
, h4
, h5
, h6
, p
, li
… but for the content editor to have to go through six × four = 24 unusable styles to be able to apply the one available to them— that’s not sufficiently usable and… ok the 2am is talking but i am shocked this passing for “fine for me” in the CKEditor world, seems it is used only for simple styles?
i am shocked this passing for “fine for me” in the CKEditor world
The experience is not ideal, for sure. Style dropdown requires a serious rethink from the usability, and architecture perspective. And the gaps are mostly visible in the advanced usage, as you pointed out. But given the scope, and being not a simple, quick fix, we just won’t have manpower to push this year into our timeline. We have been able to increase the scope of it to style more elements, but we needed to shift priorities to other plugins and features.
that i cannot then add a style to any element by setting the styles to this:
Wait, you want to be able to apply 4 different styles to >6 different elements?! That hardly seems to be a 90% use case?
I get that it’s frustrating for you today, but it’d really help if you could explain what kind of information architecture requires this kind of complexity for the site’s content authors
There is a feeble workaround for this. Clearly not ideal though:
- Create all the styles you want and apply them to the HTML tags that you want.
h2.green|Green h3.green|Green h4.green|Green h5.green|Green p.green|Green li.green|Green
- Hide disabled styles (i.e., the grayed out ones) from the UI with custom CSS.
/** Hide disabled styles from dropdown grid. */ :root .ck.ck-style-panel .ck-style-grid .ck-style-grid__button[aria-disabled=“true”] { display: none; }
- Optionally, tighten up the whitespace in the style grid, and convert it from a grid to a list, to make long lists of styles more scannable:
/** Show style panel in a list instead of a grid, and tighten whitespace */ :root .ck.ck-style-panel { padding: var(–ck-spacing-small); }
:root .ck.ck-style-panel .ck-style-grid { –ck-style-panel-columns: 1; –ck-style-panel-button-width: 360px; –ck-style-panel-button-height: 80px; column-gap: var(–ck-spacing-small); row-gap: var(–ck-spacing-small); }
:root .ck.ck-style-panel .ck-style-grid .ck-style-grid__button .ck-style-grid__button__preview { padding: 0; }
:root .ck.ck-style-panel .ck-style-grid .ck-style-grid__button .ck-style-grid__button__preview * { padding: var(–ck-spacing-small); margin: 0; }
(edited)
I can sympathize with this use case. I seem to remember CKE4 working this way; if I had a style in the style dropdown for an H4 and I applied it to some text, the text automatically also became H4. It seems like nothing maybe, but it removed a step.For the issue with the colors, I wonder if it makes sense to create a style span.color that you could then use on multiple elements. For example:<h2><span class=“color”>…</span></h2>
<p><span class=“color”>…</span></p>I’ve not tried this, but it seems like it could work(?). (edited)
Thank you— yeah, i was considering adding span as an element to do that— the only suggestion from the validator was to add span in the ‘source edit’ block though— especially since for the paragraph use case allowing specific words to be colored is at least plausible. Everywhere else though it’s a hack that makes mistakes likely— seventeen out of nineteen letters in a heading getting the color applied, etc.
Yes, I can see that possibility.
@wimleers (he/him) you do understand i am not talking about being able to make my h3
green and blue and black at once, right? I am talking about having six levels of headings and letting people make an h1
through h6
(we let the page title be replaced with a header image + rich text, so h1
is in play) be set to any of those three colors— ideally enforced to be only one at a time, but i stopped looking for ideal a while ago. Then on this site the design lets headings have a black dot at the end (heaven help us if we allow the dot to be different colors too).Three colors plus dot we are at four styles, and it would be weird if you couldn’t apply them to each level of heading.Basically if .class
worked without demanding you specify a single element or there were a pseudo header
element or a match all *
element or h1|h2|h3|h4|h5|h6.brand-color
was accepted as a single style, this would be cool. But to both be told you have to select the element and the style class separately, and be told you cannot have your style easily (for sitebuilder and the content editor) available on multiple element types— that is a bit of a showstopper. (Again if i could do h*.brand-color
in the Styles definition there’d be no complaints.)James Wilson’s CSS for hiding the unusable styles from the person editing is an absolute lifesaver and what we will be doing on this site i think.I think Aaron’s approach is probably the best general compromise available— add a span plugin to make Styles (or an alt-styles) work the same way as bold, italic, etc— that is, you can use them anywhere! And it is up to the applier to select text first, make sure they have the entire line they want selected. But we do want another plugin, because one shouldn’t have to add the source editor for that. Especially since there’s another frustration that once you have gotten into the point of adding your span
styles and getting this message:
The Style plugin needs another plugin to create
<span>
, for it to be able to create the following attributes:<span class="green blue">
. Enable a plugin that supports creating this tag. If none exists, you can configure the Source Editing plugin to support it.
dragging the Source Editing button into the active toolbar doesn’t make the Source options vertical tab show up— i think i saw a bug for that already filed. Workaround i just found: toggle disabling/enabling “Limit allowed HTML tags and correct faulty HTML” (and probably any filter) and the Source Editing options become available.But once you do add <span class>
to the source edit, span.brand-color
etc styles do work exactly as Aaron postulated.
There is a feeble workaround for this. Clearly not ideal though:
- Create all the styles you want and apply them to the HTML tags that you want.
h2.green|Green h3.green|Green h4.green|Green
(edited)
ckeditor5 | Nov 8th | View reply
(it’s not related to Style) Have you checked the options to style headings via the Heading plugin?
Yes i linked to that! (A couple times i think.) I’m thrashing back and forth in my mind between that approach to restoring the old “force the element to change” approach and the other two styles-are-separate approaches. I think conceptually i do prefer the selection of header being separate from the application of style (an editor shouldn’t have to see HX, HX Green, HX Blue times six, but rather select a heading and then have a couple styles they can apply— hence going for James Wilson’s solution).
Yeah, what i was trying to get at is that the current site builder and content editor experience is really rotten if you want three styles (classes) to be applicable to ten HTML elements (as evidenced by https://www.drupal.org/forum/support/post-installation/2022-11-30/how-do-i-configure-the-styles-dropdown-in-ckeditor-5 ), and that what we need to provide is:
- Pick element, and then pick style (without 20 greyed out style elements being shown) - needs the implementation of https://github.com/ckeditor/ckeditor5/issues/14206 EDIT: I think i mean more https://github.com/ckeditor/ckeditor5/issues/12770 “Hide inapplicable styles instead of disabling them”
or
(edited)
ckeditor5 | Nov 8th | View reply
And thank you, i don’t want that to be lost: Drupal could absolutely build on the Heading plugin, and yeah, i’m being so noisy here because i think this is something that Drupal has to give sitebuilders a pretty easy way of doing. Ditching the heading dropdown for only the styles dropdown was pretty popular with CKEditor 4, and with a little Drupal coding we could make it easy to do the same thing except using only the heading plugin for CKEditor 5. Either that, or Drupal could give a checkbox to apply James’ styles. (Or we could do both, and provide documentation explaining how to use both approaches, and urging any particular site to pick one of the two approaches!)
ckeditor.com
Headings | CKEditor 5 Documentation
Learn how to install, integrate and configure CKEditor 5 Builds and how to work with CKEditor 5 Framework, customize it, create your own plugins and custom editors, change the UI or even bring your own UI to the editor. API reference and examples included. (65 kB)
There is a feeble workaround for this. Clearly not ideal though:
- Create all the styles you want and apply them to the HTML tags that you want.
h2.green|Green h3.green|Green h4.green|Green
(edited)
ckeditor5 | Nov 8th | View reply
Tightly coupling visual styles with semantics is a dangerous game if it allows for content folks to unwittingly produce illogical heading structures. While I agree that the UI to configure and select things needs some TLC, decoupling the two concepts seems like the most a11y friendly approach, while still allowing designers to break free of the shackles of heading sizing. (edited)
^ this is one reason why projects of a significant size should have processes in place to review content edits by a core team of webmasters, who know how to look out for things like:
- does it pass design standards.
- does it satisfy document outline heading nesting requirements.
- does it pass accessibility.
Side note, another way to workaround complex DOM structures and applying styles manually in wysiwyg (may not be a good fit for headings with a matrix of stackable optional classes, but worth a look) is the CKEditor Templates module.
Also worth pointing out on this topic:
Breaking free of the shackles of heading size
Decoupling heading level from style is a good solution Eg, h2.h4
a la Bootstrap. However putting the font-size/style on an arbitrary class that could be added to a span has its own set of pitfalls because there is no way to guarantee an “ideal” nested structure of h2 > span.h4.green
is actually wrapped inside the h2 so you could end up with p > span.h4.green
. And WAVE a11y tool (maybe others) flags content that looks like it should be a heading when it doesn’t have the heading tag.
Often times, heading modifiers make the assumption they’re being applied to a block level element. As James said, spans aren’t a panacea for all use cases, unfortunately.
I support good content governance for both brand consistency and web accessibility, but sometimes the marketing team wants what they want, and they’re not going to understand why you won’t give it to them.
And if you are answering to the Director of Communications, well, that’s that.
Hey, I answer to a director . The only path forward for us is to not use ckeditor *to meet our designer’s needs for headings.https://www.drupal.org/project/layout_builder_block_headings (edited)
Drupal.org
The Layout Builder Block Headings module enhances site accessibility, lifts design constraints, and empowers site builders and content creators by allowing for the customization of both heading levels
Oct 28th, 2022
And we’re back to the never ending dilema between structured content with mediocre admin ui tooling, and wysiwyg
It does worry me as someone who really wants to see Drupal succeed. I don’t want to see the limitations of CKEditor push people to another CMS, or (worse) to Gutenberg.
@James Wilson sorry to revive an old thread, but I wanted to try your workaround and pasted
h2.green|Green h3.green|Green h4.green|Green h5.green|Green p.green|Green li.green|Green
Into my styles, but I get The label Green is not unique. error message and can’t submit the config form. (edited)
Is there a setting or custom code that enables this approach?
h2.green|Green heading 2 h3.green|Green heading 3 h4.green|Green heading 4 h5.green|Green heading 5 p.green|Green paragraph li.green|Green list item
?
Yup, okay — just wanted to be sure there wasn’t something I was missing. Thanks!