Bug #100768: CKEditor 5: Incorrect webfont path in backend - TYPO3 Core - TYPO3 Forge

Actions

Copy link

Bug #100768

closed

Epic #99669: CKEditor5 Collection

CKEditor 5: Incorrect webfont path in backend

Added by Samuel Heinz 12 months ago. Updated 7 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:

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 open — 2 closed)

Actions

Copy link

Updated by Oliver Hader 12 months 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

Copy link

Updated by Oliver Hader 12 months ago

Status changed from New to Needs Feedback

Actions

Copy link

Updated by Samuel Heinz 12 months 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

Copy link

Updated by Alexander Wende 10 months 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

Copy link

Updated by Benjamin Franzke 7 months ago

Parent task set to #99669

Actions

Copy link

Updated by Česlav Przywara 7 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

Copy link

Updated by Gerrit Code Review 7 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

Copy link