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 over 1 year ago. Updated 5 months ago.

Status:

Closed

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

Actions

Copy link

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

Copy link

Updated by Oliver Hader over 1 year ago

Status changed from New to Needs Feedback

Actions

Copy link

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

Copy link

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

Copy link

Updated by Benjamin Franzke about 1 year ago

Parent task set to #99669

Actions

Copy link

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