search

FriendsOfTYPO3 / frontend_editing

TYPO3 CMS Frontend Editing
https://friendsoftypo3.github.io/frontend_editing/
102 stars 39 forks source link

Ckeditor JS Dependencies fail to load (CKEDITOR.basePath not set correctly) #377

Closed ChrisSoelder closed 2 years ago

ChrisSoelder commented 5 years ago

On my installation ckeditor fails to initialize in frontend because the path to its installation folder (CKEDITOR.basePath) isn't resolved correctly.

When loading the frontend with everything set up correctly i'm getting the following error

ckeditor.1571124595.js:97 GET https://my.domain.com/skins/moono/skin.js?t=J8Q9 net::ERR_ABORTED 404 (Not Found)
ckeditor.1571124595.js:97 GET https://my.domain.com/lang/de.js?t=J8Q9 net::ERR_ABORTED 404 (Not Found)
ckeditor.1571124595.js:251 Uncaught TypeError: Cannot set property 'dir' of undefined
    at Object.e (ckeditor.1571124595.js:251)
    at g (ckeditor.1571124595.js:252)
    at Array.n (ckeditor.1571124595.js:253)
    at q (ckeditor.1571124595.js:253)
    at HTMLScriptElement.CKEDITOR.env.ie.g.$.onerror (ckeditor.1571124595.js:254)

After some digging into the code I was able to find out that CKEDITOR.basePath doesn't resolve correctly to it's installation URL when ckeditor ist loaded. To solve this issue i tried setting the javascript variable window.CKEDITOR_BASEPATH = '/typo3/sysext/rte_ckeditor/Resources/Public/JavaScript/Contrib/' before ckeditor is initialized. After that all js dependencies for ckeditor were correctly loaded an Inline editing worked as it should.

I've tested this behaviour with Typo3 9.5.10 on PHP 7.2 using the new Site Configuration Module for Site Setup.

My composer Setup looks like this 

{
  "name": "demo/project",
  "description": "Demo composer setup for Frontend Editing",
  "version": "1.0.0",
  "type": "project",
  "repositories": [
    {
      "type": "composer",
      "url": "https://composer.typo3.org/"
    }
  ],
  "minimum-stability": "stable",
  "require": {
    "bk2k/bootstrap-package": "^11.0",
    "friendsoftypo3/frontend-editing": "^1.7",
    "helhum/typo3-console": "^5.7",
    "typo3/cms-about": "^9.5",
    "typo3/cms-adminpanel": "^9.5",
    "typo3/cms-backend": "^9.5",
    "typo3/cms-belog": "^9.5",
    "typo3/cms-beuser": "^9.5",
    "typo3/cms-core": "^9.5",
    "typo3/cms-extbase": "^9.5",
    "typo3/cms-extensionmanager": "^9.5",
    "typo3/cms-filelist": "^9.5",
    "typo3/cms-filemetadata": "^9.5",
    "typo3/cms-fluid": "^9.5",
    "typo3/cms-form": "^9.5",
    "typo3/cms-frontend": "^9.5",
    "typo3/cms-info": "^9.5",
    "typo3/cms-install": "^9.5",
    "typo3/cms-linkvalidator": "^9.5",
    "typo3/cms-lowlevel": "^9.5",
    "typo3/cms-opendocs": "^9.5",
    "typo3/cms-recordlist": "^9.5",
    "typo3/cms-recycler": "^9.5",
    "typo3/cms-redirects": "^9.5",
    "typo3/cms-reports": "^9.5",
    "typo3/cms-rte-ckeditor": "^9.5",
    "typo3/cms-scheduler": "^9.5",
    "typo3/cms-seo": "^9.5",
    "typo3/cms-setup": "^9.5",
    "typo3/cms-sys-note": "^9.5",
    "typo3/cms-tstemplate": "^9.5",
    "typo3/cms-viewpage": "^9.5",
    "yoast-seo-for-typo3/yoast_seo": "^5.0"
  }
}
jan-vodila commented 4 years ago

Hello,

unfortunately this issue is still not resolved. I have the same problem as @ChrisSoelder even with latest version 1.9.4

Ckeditor is checking base path as follows via following regex: var basePathSrcPattern = /(^|.*[\\\/])ckeditor\.js(?:\?.*|;.*)?$/i; - see ckeditor_base.js It means, that it expects ckeditor.js file referenced in some <script> tag. Everything works fine until you set $GLOBALS['TYPO3_CONF_VARS']['FE']['versionNumberInFilename'] = 'embed', then the ckeditor.js file gets version number within the name, f.e.: ckeditor.1571124595.js, which violates the regex and then CKEDITOR_BASEPATH is not set properly and doesn't work for subpages.

As a workaround I have used $GLOBALS['TYPO3_CONF_VARS']['FE']['versionNumberInFilename'] = 'querystring', but I would suggest to add <script>window.CKEDITOR_BASEPATH = $domainName</script> by your extension. Domain name should be configurable or you should get it somehow automatically.

birgitberlin commented 4 years ago

Same problem in TYPO3 v.10.4.9 $GLOBALS['TYPO3_CONF_VARS']['FE']['versionNumberInFilename'] = 'querystring' fixes a part of the problem.

The reason for wrong file paths seems to be in EXT:rte_ckeditor/ext_localconf.php line 12:

if (TYPO3_REQUESTTYPE & TYPO3_REQUESTTYPE_BE) { \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance( \TYPO3\CMS\Core\Page\PageRenderer::class )->addRequireJsConfiguration([ 'shim' => [ 'ckeditor' => ['exports' => 'CKEDITOR'] ], 'paths' => [ 'ckeditor' => \TYPO3\CMS\Core\Utility\PathUtility::getAbsoluteWebPath( \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::extPath('rte_ckeditor', 'Resources/Public/JavaScript/Contrib/') ) . 'ckeditor' ] ]); }

In my case, replacing line 12 as a test fixes the problem: if (TYPO3_REQUESTTYPE) {

birgitberlin commented 4 years ago

In EXT:frontend_editing/Classes/Hook/FrontendEditingInitializationHook.php

on line 433 add: , 'ckeditor' => PathUtility::getAbsoluteWebPath( ExtensionManagementUtility::extPath('rte_ckeditor', 'Resources/Public/JavaScript/Contrib/') ) . 'ckeditor'

In Install Tool or LocalConfiguration.php or AdditionalConfiguration.php: $GLOBALS['TYPO3_CONF_VARS']['FE']['versionNumberInFilename'] = 'querystring'; $GLOBALS['TYPO3_CONF_VARS']['FE']['compressionLevel'] = 5; compressionLevel has to be > 0

mabolek commented 4 years ago

Thank you for the feedback and fix, @birgitberlin! I'm reopening this issue now.