Bold and italic formatting are not applied in summary

Created on 21 March 2022, almost 3 years ago
Updated 17 April 2024, 9 months ago

Problem/Motivation

Bold and italic formatting are not applied in summary.

Steps to reproduce

  1. Create details element
  2. Edit text in summary element
  3. Apply italic or bold
  4. See that the styles do not apply, also in source they are not present

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

🐛 Bug report
Status

Active

Version

2.0

Component

Code

Created by

🇩🇪Germany anruether Bonn

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • 🇨🇦Canada amykhailova

    Facing the same issue, all elements except spans are being stripped out in summary and span inside span is being stripped out too. Any ideas?

  • 🇬🇧United Kingdom jacobupal Leeds

    Span-level styles do work within the element, so until this is solved, you can use them to apply bold and italic styling to text within summaries. This is a workaround though, not a permanent solution, which only effects the appearance of the text, not the semantics.

    1. add a 'bold' and 'italic' style to the Styles config in the CKEditor settings for the Text Format you are using
    2. use those styles within the element
    3. apply the bold and italic styling you need with CSS

    Example styles:

    span.force-bold|Force Bold
    span.force-italic|Force Italic
    

    Example CSS:

    span.force-bold{font-weight:bold!important}
    span.force-italic{font-style:italic!important}
    

    !important; is usually not recommended, but personally I think it helps in later identifying which css rules which were hacks that need removing in future.

  • 🇬🇧United Kingdom jacobupal Leeds

    Actually. Ignore everything I said above. The method I wrote works exactly the same as using 'Italic' and 'Bold' buttons.

    Neither button (for me) will apply to selected text, but both of them do create an empty <strong> or <em> element at the end of the summary. This is removed if you switch to source view. But if you click the 'Bold' icon and start typing right away you do get some bold text at the end of the summary.

    Incidentally keyboard shortcuts Ctrl+i and Ctrl+b do both work as expected.

  • 🇨🇦Canada mandclu

    I can also verify the problem. In fact, the CKEditor4 version of this plugin explicitly allowed for media and images inside the summary, since the HTML spec for the summary element allows for any phrasing content (or one element of heading content, but with accessibility problems).

    In the conversion of the plugin to work with CKEditor5, I missed the fact that the allowedContent configuration option was dropped from CKEditor5. It sounds like the way to make this work is by creating a plugin that will extend the editor's General HTML support. There's more information available in the CKE documentation.

Production build 0.71.5 2024