Use inline style in CKEditor 5

Created on 22 December 2022, over 1 year ago
Updated 23 March 2023, over 1 year ago

Hi,
Here is my config :
Drupal 9.5.0
Theme : Bootstrap 5

I've activated CKEditor 5 to replace V4 then selected it in text format. But when I edit a content, I lose some inline style.
For example :
<span style="font-weight:600">This is bold text</span>
becomes :
<strong>This is bold text</strong>

This is only an example, I know semantically talking "strong" can replace "font-weight". But I don't dare editing all my other contents or I might lose other inline style more important which would break the pages.

How can I prevent this ? it was working fine in CKEditor 4.
Tanks.

💬 Support request
Status

Fixed

Version

9.5

Component
CKEditor 5  →

Last updated about 3 hours ago

Created by

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.

  • 🇧🇪Belgium Wim Leers Ghent 🇧🇪🇪🇺

    drush cex <the ID of your text format> + drush cex <the ID of your text editor>

  • 🇦🇲Armenia le72 Yerevan 🇦🇲

    With enabled "Limit allowed HTML tags and correct faulty HTML" filter you can't have style attribute.

  • 🇧🇪Belgium svdhout

    We use the style plugin to add inline styles, like this:

    span.highlight|Highlight

    Saving the editor configuration throws the following error

    The Style plugin needs another plugin to create <span>, for it to be able to create the following attributes: <span class="highlight">. Enable a plugin that supports creating this tag. If none exists, you can configure the Source Editing plugin to support it.

    Which is correct, because we do not have a plugin defining that we can use span tags.
    The approach for adding the source editing plugin works, and allows me to add the styling i want.

    However, i do not really like having to add the Source editing plugin for this.

    I can solve the problem in a module by adding this configuration inside a .ckeditor5.yml file:

    ckeditor5_span_span:
      ckeditor5:
        plugins:
          - essentials.Essentials
      drupal:
        label: Span
        library: core/ckeditor5.essentials
        admin_library: ckeditor5/internal.admin.essentials
        elements:
          - <span>
    

    Is allowing span tags something we want to do in core, or would it be best to create a contrib module for this?

  • Status changed to Fixed over 1 year ago
  • 🇧🇪Belgium Wim Leers Ghent 🇧🇪🇪🇺

    However, i do not really like having to add the Source editing plugin for this.

    That's the only way, sorry.

    I can solve the problem in a module by adding this configuration inside a .ckeditor5.yml file:
    […]

    Is allowing span tags something we want to do in core

    Clever work-around for your particular use case! 😄 But that now means you can create <span> tags using the UI. Which is not actually true.

    In fact, most people seem to be really annoyed by <span> in general — we used to be more pragmatic but got a lot of backlash. See #3273983: Do not assume that plugin supporting also supports in SourceEditingRedundantTags and upgrade path → .

    or would it be best to create a contrib module for this?

    I think an ckeditor5_implicitly_allow_spans contrib module would make sense, yes!

  • Automatically closed - issue fixed for 2 weeks with no activity.

Production build 0.69.0 2024