4

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

5
  • 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".
    – cilefen
    Jan 27, 2023 at 22:20
  • Have you tried changing the CKEditor configuration?
    – cilefen
    Jan 27, 2023 at 23:55
  • 1
    Isn’t that a bad thing? It’s in core. It used to be much simpler in ckeditor4
    – Scott
    Jan 28, 2023 at 0:37
  • Correct one would be <i class>.
    – leymannx
    Jan 29, 2023 at 19:51
  • 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 drupal.org/project/drupal/issues/3337298.
    – leymannx
    Jan 29, 2023 at 22:01

3 Answers 3

10

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

9
  • 2
    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.
    – Scott
    Jan 28, 2023 at 14:24
  • @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
    Jan 28, 2023 at 16:40
  • (Probably necessary to add your own little plugin for it.)
    – leymannx
    Jan 28, 2023 at 16:41
  • 1
    ...which is my answer.
    – cilefen
    Jan 28, 2023 at 17:28
  • 2
    @Scott – Even if you'd create that plugin, CKE5 would strip the empty tag. That's what that issue is about.
    – leymannx
    Jan 29, 2023 at 19:52
0

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

3
  • 2
    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?
    – leymannx
    Jan 28, 2023 at 9:10
  • Yes I think so.
    – cilefen
    Jan 28, 2023 at 12:09
  • 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.
    – Loopy
    Jul 17, 2023 at 12:48
0

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

1
  • The Source editing settings are still present in Drupal 10.1.
    – apaderno
    Jul 7, 2023 at 15:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.