Bug #102096
closed
CKEditor5 - Wrong id in custom element `typo3-rte-ckeditor-ckeditor5` when textfield have name with dot (.)
0%
Description
We have example field "settings.bodytext" in flexform which is used here:
https://github.com/TYPO3/typo3/blob/main/typo3/sysext/rte_ckeditor/Classes/Form/Element/RichTextElement.php#L99C78-L99C78
data[tt_content][1510][pi_flexform][data][options][lDEF][settings.bodytext][vDEF]`
and sanitized to:
data_tt_content__1510__pi_flexform__data__options__lDEF__settings.bodytext__vDEF_
Final HTML will look like this:
<typo3-rte-ckeditor-ckeditor5 id="data_tt_content__1510__pi_flexform__data__options__lDEF__settings.bodytext__vDEF_ckeditor5" [...]>[...]</typo3-rte-ckeditor-ckeditor5>
According to https://www.w3.org/TR/html4/types.html#type-id dot(.) in id attribute is allowed. Ok, fine.
Issue is final CSS selector in prefixed files will fail:
#data_tt_content__1510__pi_flexform__data__options__lDEF__settings.bodytext__vDEF_ckeditor5 .ck-content .cke_editable
Effect is, files declared in yaml editor.contentsCss are prefixed and loaded but won't work so content in CKEditor5 is unstyled.
Solutions:
- escape dot in selector with id: https://stackoverflow.com/a/605835
- avoid dot char in regexp here: https://github.com/TYPO3/typo3/blob/c7c26601ae85f90a04937f7cbd95977b0810f472/typo3/sysext/rte_ckeditor/Classes/Form/Element/RichTextElement.php#L380
Updated by Jakub Zgirski 7 months ago
- Target version deleted (
Candidate for patchlevel)
It looks like it's fixed here: https://review.typo3.org/c/Packages/TYPO3.CMS/+/81388/2/typo3/sysext/rte_ckeditor/Classes/Form/Element/RichTextElement.php#b408 so this task can be closed.
Updated by
Updated by Christian Kuhn 7 months ago
- Related to Bug #100784: CKEditor 5 - Configuration of custom CKeditor 5 plugin via RTE.editor.config.{customPlugin} not possible added