Score:4

How can I change allowed tags in CKEditor 5?

th flag

How do I add <i> in CKeditor 5 without hacking a core module?

In Text formats and editor, for the allowed HTML tags, the following text is shown-

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.

Adding the <i> in Source editing to allow for it. Source Edit

Using the newly added tag for font awesome just ends up stripping the tag out anyway.

Source Edit

id flag
Hello: Please cite the source of information you are referring to so we don't have to repeat your searches. For example: "[it] states it's in some config file in core", and "other sites say".
id flag
Have you tried changing the CKEditor configuration?
Scott avatar
th flag
Isn’t that a bad thing? It’s in core. It used to be much simpler in ckeditor4
leymannx avatar
ne flag
Correct one would be `<i class>`.
leymannx avatar
ne flag
Correct one under "Source editing > Manually editable HTML tags" would be `<i class>`. But there's an upstream bug were CKE5 strips empty inline elements, see https://www.drupal.org/project/drupal/issues/3337298.
Score:10
ne flag

Like in earlier Drupal versions WYSIWYG editor settings can be configured per text format. For example, under /admin/config/content/formats/manage/basic_html you configure the editor used for the "Basic HTML" text format.


In CKEditor 5 the allowed HTML tags can now be found in the "Source editing" plugin settings where you add all HTML tags that are not already covered by any other enabled plugin.

Screenshot highlighting the CKEditor 5 source editing tab in Drupal 10


If you want to use the <i> tag for italic text you can simply add the italics button to the active toolbar – done.

Screenshot highlighting the CKEditor 5 configurable toolbar in Drupal 10

Scott avatar
th flag
Sorry, not entirely what I want. I need the <I> tag as in font awesome, not the I button which gives you the <em> tag. I've placed <I> in the source editing and it just strips it out.
leymannx avatar
ne flag
@Scott – Can you please add that piece of missing info and sample markup to your question? I will then try to look deeper into it later.
leymannx avatar
ne flag
(Probably necessary to add your own little plugin for it.)
id flag
...which is my answer.
leymannx avatar
ne flag
@Scott – Okay, you found a bug. See https://www.drupal.org/project/fontawesome/issues/3274028#comment-14851783 and https://github.com/ckeditor/ckeditor5/issues/9888 in specific.
leymannx avatar
ne flag
@Scott – I created https://www.drupal.org/project/drupal/issues/3337298.
Scott avatar
th flag
@leymannx thank you for the submission on this. I've updated by question
Scott avatar
th flag
Might anyone have an article on how to created this "Plugin" to allow for this? I've searched and I'm afraid I don't really follow anything ever said on drupal.org.
leymannx avatar
ne flag
@Scott – Even if you'd create that plugin, CKE5 would strip the empty tag. That's what that issue is about.
Score:0
id flag

As I understand it the question is “how do you add a custom button to the CKEditor?”

If that is the question, that is documented: https://www.drupal.org/docs/core-modules-and-themes/core-modules/ckeditor-5-module/plugin-and-contrib-module-development

leymannx avatar
ne flag
I think the way you can update allowed tags changed between CKE4 and 5. And OP wants to to know where that setting went. Can you only control that with a custom button now?
id flag
Yes I think so.
Loopy avatar
cn flag
I think the conclusion CKEditor is hoping you come to now is that you pay them to do the custom things you used to easily do in version 4.
Score:0
cn flag

There no longer seems to be a source editing field. It's just this read-only field with the tooltip: "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" with no guidance whatsoever on how to update the allowed HTML tags with "CKEditor 5 configuration".

enter image description here

apaderno avatar
us flag
The *Source editing* settings are still present in Drupal 10.1.
I sit in a Tesla and translated this thread with Ai:

mangohost

Post an answer

Most people don’t grasp that asking a lot of questions unlocks learning and improves interpersonal bonding. In Alison’s studies, for example, though people could accurately recall how many questions had been asked in their conversations, they didn’t intuit the link between questions and liking. Across four studies, in which participants were engaged in conversations themselves or read transcripts of others’ conversations, people tended not to realize that question asking would influence—or had influenced—the level of amity between the conversationalists.