TYPO3 11.5 - CKEditor keeps replacing specific tags on loaded HTML with non-breaking spaces - ckeditor

Question

In my TYPO3 project (v11.5.20 via composer), I want the included RTE CKEditor to be able to work with - not necessarily display though - boxicons, which are formatted as simple HTML tags like this: <i class="bxs bx-bank"></i>. I made sure that the processing options of the RTE are allowing this tag, which I can confirm as both the frontend page and the network data delivered on loading the editing frame for a content element are properly including the tag.
When editing the content element though, once I switch to the source code view of CKEditor, the i tag has been replaced with a , for reasons I cannot figure out. I've read about CKEditor's Advanced Content Filter and how it processes HTML input apart from TYPO3's HTMLParser, and that it could be disabled by setting the editor.config.allowedContent option in your custom RTE preset to true, but this has no effect for me somehow. My preset looks like this, which is basically the default preset of CKEditor with some minor changes:
imports:
# - { resource: "EXT:lraffb_intern/Configuration/RTE/Processing.yaml" }
- { resource: "EXT:rte_ckeditor/Configuration/RTE/Editor/Base.yaml" }
- { resource: "EXT:rte_ckeditor/Configuration/RTE/Editor/Plugins.yaml" }
- { resource: "EXT:rte_ckeditor_image/Configuration/RTE/Plugin.yaml" }
editor:
config:
allowedContent: true
format_tags: "p;h1;h2;h3;h4;h5;pre"
toolbarGroups:
- { name: styles, groups: [ styles, format ] }
- { name: basicstyles, groups: [ basicstyles ] }
- { name: paragraph, groups: [ list, indent, blocks, align ] }
- { name: links, groups: [ links ] }
- { name: clipboard, groups: [ clipboard, cleanup, undo ] }
- { name: editing, groups: [ spellchecker ] }
- { name: insert, groups: [ insert ] }
- { name: tools, groups: [ table, specialchar, insertcharacters ] }
- { name: document, groups: [ mode ] }
justifyClasses:
- text-left
- text-center
- text-right
- text-justify
extraPlugins:
- justify
- autolink
- editorplaceholder
removeButtons:
- Anchor
- Underline
- Strike
- Styles
(Note that I've resorted to legacy RTE processing via TSConfig since some options in the custom Processing.yaml did not work reliably somehow. The TSConfig code is quite verbose so I'll provide only when required.)
Does someone know what could cause this and how to fix it?

Answer 1

⚠ There are several hurdles to overcome here, but everything is feasible in some form. It should be remembered that this configuration is relatively tricky, mainly because security-related issues are involved here, of course. An input of content goes through several stages of verification:
The CKEditor only allows certain content and must receive appropriate instructions.
TYPO3 also needs permission to store certain content in the database.
Content is additionally processed with a sanitizer during output in the frontend.
You can solve this as follows (tested with TYPO3 v10/v11 with CKEditor v4):
First you should always use span instead of the HTML tag i, because this would be syntactically more correct and you have less problems with the configuration.
Also, the CKEDitor converts italic to em by default.
Another common mistake when configuring the CKEditor is to use allowedContent: true.
This basically creates a security hole in the editor and makes the concept of secure input useless.
Instead, you should always explicitly allow a specific HTML tag or attribute.
You can do this with the following statement in your YAML configuration:
editor:
config:
extraAllowedContent:
# Allow class-attribute
- span(*)[class]
# Allow all attributes
#- span(*)[*]
Further note that without the help of a JavaScript plugin for the CKEditor, empty tags are generally removed, so you would have to add a space.
You can of course solve this directly with a CKEditor plugin, and give the CKEditor the following instruction:
CKEDITOR.dtd.$removeEmpty.span = 0;
If you don't or can't use JavaScript, an icon would always have to be entered with a space:
<span class="bxs bx-bank"> </span>
Depending on your configuration you might have to allow saving CSS classes in the span tag.
You do this either in PageTSconfig:
RTE.default.proc {
# Allow additional attributes in SPAN-tags on the way from RTE to DB
HTMLparser_db.tags.span.allowedAttribs := addToList(class)
}
...or in the YAML configuration of the CKEditor (Processing):
processing:
## CONTENT TO DATABASE
HTMLparser_db:
tags:
span:
allowedAttribs:
- class
Finally I can recommend a nice TYPO3 extension that does all that (and more) for you, and offers you various icon sets (including Boxicons) for use in TYPO3:
https://github.com/quellenform/t3x-iconpack
https://github.com/quellenform/t3x-iconpack-boxicons