By wim leers on
Change record status: 
Published (View all published change records)
Project: 
Drupal core
Introduced in branch: 
9.3.x
Introduced in version: 
9.3.17
Issue links: 
https://www.drupal.org/node/3273983
Description: 

During the CKEditor 4 → 5 upgrade path, the CKEditor 5 module would enable the "Language" button (because it supports <span lang dir>) just to support <span>. Generalized: it'd enable whichever CKEditor 5 plugin supports a superset of the tag (<tag attr>) it needs to be able to support to not lose support for tags (<tag>) allowed by the text format.

Most sites' Basic HTML text format have <span> in their list of allowed HTML tags because that is the default.

The "Language" button has very limited use in a Drupal site because content languages are organized through the Core modules, and the user experience can be really confusing if HTML markup for languages can also be added within a field. Therefore enabling the "Language" button should be a conscious choice of a site builder, not the default option. Enabling it just to support the <span> tag is not appropriate and should therefore be considered a regression.

This is why a significant API change was introduced for CKEditor 5 plugin definitions: previously

    elements:
      - <a href>

meant: the plugin can create <a> tags and set the href attribute on them. Since this, the meaning has changed to the plugin can not create <a> tags but only set the href attribute on them.

To retain the previous behavior, you need to explicitly indicate in the plugin metadata in your *.ckeditor5.yml file that creating the <a> tag is supported. That looks like this:

    elements:
      - <a>
      - <a href>

"Plain tags" listed in drupal.elements, i.e. with zero attributes, are interpreted to be creatable tags. See CKEditor5PluginDefinition::getCreatableElements().

Developers: Validation at development time

If your plugin implements CKEditor5PluginElementsSubsetInterface and it returns an illogical subset, you'll get a logic exception — for example:

LogicException: The "media_media" CKEditor 5 plugin implements ::getElementsSubset() and did return a subset ("<drupal-media data-entity-type data-entity-uuid alt>") but the following tags can no longer be created: "<drupal-media>".

Site Builders: Validation at configuration time

Consequently, if you now enable a plugin that is only able to set attributes and the tag cannot yet be created by CKEditor 5, that you will get a validation error in the configuration UI:

And it disappears/never appears if <span> is supported:

Impacts: 
Site builders, administrators, editors
Module developers

Comments

electrokate’s picture

electrokate commented

Thank you this helped me today! If anyone is having trouble saving this form, just add the tag first and save, then go back in and enable the plugin.

candelas’s picture

candelas commented

I am trying to follow your instructions in Drupal 10 and CKEditor 5 but the tags in Source editing are overriden when I try to save and I get a warning message.
Whatever that I write, when saving the Source editing field gets this:
<b> <i> <cite> <dl> <dt> <dd> <figure> <figcaption> <audio> <video> <source> <track> <div> <embed> <object> <iframe>

And this
Error message

    The Language plugin needs another plugin to create <span>, for it to be able to create the following attributes: <span lang dir>. Enable a plugin that supports creating this tag. If none exists, you can configure the Source Editing plugin to support it.
    The current CKEditor 5 build requires the following elements and attributes:
    <br> <p class="text-align-left text-align-center text-align-right text-align-justify"> <h2 class="text-align-left text-align-center text-align-right text-align-justify"> <h3 class="text-align-left text-align-center text-align-right text-align-justify"> <h4 class="text-align-left text-align-center text-align-right text-align-justify"> <h5 class="text-align-left text-align-center text-align-right text-align-justify"> <* dir="ltr rtl" lang> <b> <i> <cite> <dl> <dt> <dd> <figure> <figcaption> <audio> <video> <source> <track> <div class="text-align-left text-align-center text-align-right text-align-justify"> <embed> <object> <iframe> <strong> <em> <u> <s> <sub> <sup> <blockquote> <a href> <ul> <ol reversed start> <li> <img src alt height width data-caption> <span dir> <drupal-media data-entity-type data-entity-uuid alt data-caption>
    The following elements are missing:
  <strong> <em> <u> <s> <sub> <sup> <blockquote> <a href> <ul> <ol reversed start> <li> <img src alt height width data-caption> <span dir> <drupal-media data-entity-type data-entity-uuid alt data-caption>

Since I am migrating from a D7, no to break old content, I have to uncheck "Limit allowed HTML tags and correct faulty HTML" that I used before in CKEditor to clean code from users.

I am searching, but not luck. If you can help with any tip, it will be very wellcome. Thanks

//trying to answer one question for each one that i make.
//this way, drupal will be more friendly and strong

markdc’s picture

markdc
Location Selters
commented

+1

gillesv’s picture

gillesv commented

Having a similar issue: as soon as I add "<iframe>" (with or without attributes) to "Source editing", I get the same kind of error.
Temporarily fixed by leaving "<iframe>" out of "Source editing" and adding iframe capabilities via the CKEditor iFrame module, but this still doesn't allow me to add custom attributes like "allowfullscreen".

mahde’s picture

mahde
He/Him
Location Vancouver
commented

I am facing the same issue when adding "<iframe>" to Source editing.
Drupal 10.2
CkEditor 5

loopy1492’s picture

loopy1492 commented

Yeah. I am trying to help contribute to the ckeditor liststyle module.

I added: 

ckeditor_liststyle_liststyle:
  ckeditor5:
    plugins:
      - list.bulletedListStyle
      - list.numberedListStyle
  drupal:
    label: ListStyle
    library: ckeditor_liststyle/editor
    class: Drupal\ckeditor_liststyle\Plugin\CKEditor5Plugin\ListStyle
    elements:
      - <ul>
      - <ul type>
      - <ol>
      - <ol type>
    conditions:
      plugins:
        - ckeditor5_list

And we are getting:

LogicException: The "ckeditor_liststyle_liststyle" CKEditor 5 plugin implements ::getElementsSubset() and did return a subset ("<ul type><ol type reversed start>") but the following tags can no longer be created: "<ul><ol>". in Drupal\ckeditor5\Plugin\CKEditor5PluginManager->getProvidedElements() (line 409 of /home/ide/project/docroot/core/modules/ckeditor5/src/Plugin/CKEditor5PluginManager.php).

And of course the eternal problem of this message on the text format.

With CKEditor 5 this is a read-only field. The allowed HTML tags and attributes are determined by the CKEditor 5 configuration. Manually removing tags would break enabled functionality, and any manually added tags would be removed by CKEditor 5 on render.

Even adding the ul and ol manually to the config yml file won't override the Allowed HTML tags on import.

So what are we supposed to do?

tbcs’s picture

tbcs commented

It seems that the core ckeditor5_language plugin should be updated thusly:

elements:
- <span>
- <span lang dir>

Right now if you want to enable the language plugin but do not want to enable source editing, you have no options. The following error appears:

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

This is confusing. See https://www.drupal.org/project/drupal/issues/3388978

It seems natural to allow the language plugin to also create the tag it may modify.

Is there any problem with this?