Project

General

Profile

Actions

Bug #100768

closed

Epic #99669: CKEditor5 Collection

CKEditor 5: Incorrect webfont path in backend

Added by Samuel Heinz about 1 year ago. Updated 9 months ago.

Status:
Resolved
Priority:
Should have
Assignee:
-
Category:
RTE (rtehtmlarea + ckeditor)
Target version:
-
Start date:
2023-04-27
Due date:
% Done:

100%

Estimated time:
TYPO3 Version:
12
PHP Version:
8.2
Tags:
Complexity:
Is Regression:
Sprint Focus:

Description

After TYPO3 Upgrade to TYPO3 v12 LTS the webfonts in the RTE/CKEditor v5 not working well.
In Frontend it works well.

Composer Installation

CSS File frontend and rte.css

@font-face {
  font-family: "roboto_condensedregular";
  src: url("../../Fonts/robotocondensed-regular-webfont.eot");
  src: url("../../Fonts/robotocondensed-regular-webfont.eot?#iefix") format("embedded-opentype"), url("../../Fonts/robotocondensed-regular-webfont.woff2") format("woff2"), url("../../Fonts/robotocondensed-regular-webfont.woff") format("woff"), url("../../Fonts/robotocondensed-regular-webfont.ttf") format("truetype"), url("../../Fonts/robotocondensed-regular-webfont.svg#roboto_condensedregular") format("svg");
  font-weight: normal;
  font-style: normal;
}

Frontend file path
CSS: https://www.domainname.tld/_assets/40bdfa44c70e4b3480c28be680c2f7f2/Css/Dist/styles.css?1682583229

Webfonts: https://www.domainname.tld/_assets/40bdfa44c70e4b3480c28be680c2f7f2/Fonts/robotocondensed-regular-webfont.woff2

-> Working

Backend file paths
CSS: https://www.domainname.tld/typo3/rte/resource/stylesheet?token=6d5d4ab8f6bd5e872b027a99b2754a7be74b8171&params=%7B%22styleSrc%22:%22%5C/_assets%5C/40bdfa44c70e4b3480c28be680c2f7f2%5C/Css%5C/Dist%5C/rte.css%22,%22cssPrefix%22:%22%23data_tt_content__13__bodytext_ckeditor5%20.ck-content%22%7D&hmac=3e344820e55d1a8f015c66195764ee875485ba13#981c2502058c2f46070e70adfea9d978972f86d1

Webfonts: https://www.domainname.tld/typo3/Fonts/robotocondensed-regular-webfont.woff2

-> Wrong - Not working

I think the generated RTE css should also be in "_assets" to work probably with other assets like webfonts...

Best regards
Sam


Related issues 2 (0 open2 closed)

Related to TYPO3 Core - Task #103151: Feature-96874-CKEditor5.html#css-styling should be updated; still claims SCSS processingResolvedBenjamin Franzke2024-02-19

Actions
Related to TYPO3 Core - Task #103310: Add note about limitations of CKEditor5 CSS stylingResolvedChris Müller2024-03-06

Actions
Actions #1

Updated by Oliver Hader about 1 year ago

CKEditor5 requires custom CSS to be prefixed with a .ck-content class, the stylesheet endpoint is automatically adding this to a given stylesheet resource with an additional element identifier (there might be multiple different RTEs in the backend, having different stylesheet definitions).

Thus, stylesheets for CKEditor5 are dynamic. Please use a separate stylesheet file (e.g. rte.css) for the sake of being used the backend CKEditor5 & adjust it's path names.

As an alternative, it might be possible to introduce another staticContentsCss for assets that were prefixed manually with the .ck-content class.

Actions #2

Updated by Oliver Hader about 1 year ago

  • Status changed from New to Needs Feedback
Actions #3

Updated by Samuel Heinz about 1 year ago

Hey Oli, thx for the feedback.

Current folder structure:
/vendor/namespace/sitepackage/Resources/Public/Fonts/robotocondensed-regular-webfont.eot (and other font files)
/vendor/namespace/sitepackage/Resources/Public/Css/Dist/styles.css (frontend css)
/vendor/namespace/sitepackage/Resources/Public/Css/Dist/rte.css (editor css)

Both css files have the same webfont syntax and implementation which works in CKEditor v4 very well.

editor:
config:
contentsCss: "EXT:sitepackage/Resources/Public/Css/Dist/rte.css"

Whats the recommended implementation for webfonts in rte.css? Can't access the dynamic generated path like "/_assets/40bdfa44c70e4b3480c28be680c2f7f2/Fonts/robotocondensed-regular-webfont.eot"

Best regards
Sam

Actions #4

Updated by Alexander Wende about 1 year ago

There is a workarround since TYPO3 12.3.
You can use https://docs.typo3.org/c/typo3/cms-core/main/en-us/Changelog/12.3/Feature-100232-LoadAdditionalStylesheetsInTYPO3Backend.html to load the backend font definitions.

Just move the font definitions from rte.css to e.g. backend.css. Then use include backend.css in additional.php settings like:
$GLOBALS['TYPO3_CONF_VARS']['BE']['stylesheets'][my_extension]= 'EXT:myextension/Resources/Public/Css/backend.css';

Actions #5

Updated by Benjamin Franzke 9 months ago

  • Parent task set to #99669
Actions #6

Updated by Česlav Przywara 9 months ago

I have the same issue with version 12.4.6 and non-Composer installation. Not only webfonts, but also other assets (like background images) are affected.

Actions #7

Updated by Gerrit Code Review 9 months ago

  • Status changed from Needs Feedback to Under Review

Patch set 1 for branch main of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/81295

Actions #8

Updated by Gerrit Code Review 9 months ago

Patch set 2 for branch main of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/81295

Actions #9

Updated by Gerrit Code Review 9 months ago

Patch set 3 for branch main of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/81295

Actions #10

Updated by Gerrit Code Review 9 months ago

Patch set 4 for branch main of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/81295

Actions #11

Updated by Gerrit Code Review 9 months ago

Patch set 5 for branch main of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/81295

Actions #12

Updated by Gerrit Code Review 9 months ago

Patch set 1 for branch 12.4 of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/81308

Actions #13

Updated by Anonymous 9 months ago

  • Status changed from Under Review to Resolved
  • % Done changed from 0 to 100
Actions #14

Updated by Benjamin Franzke 4 months ago

  • Related to Task #103151: Feature-96874-CKEditor5.html#css-styling should be updated; still claims SCSS processing added
Actions #15

Updated by Chris Müller 4 months ago

  • Related to Task #103310: Add note about limitations of CKEditor5 CSS styling added
Actions

Also available in: Atom PDF