netresearch / rte-ckeditor-image
Image support in CKEditor for the TYPO3 ecosystem
Installs: 719 768
Dependents: 5
Suggesters: 1
Security: 0
Stars: 56
Watchers: 15
Forks: 65
Open Issues: 32
Type:typo3-cms-extension
Requires
- ext-dom: *
- ext-libxml: *
- typo3/cms-backend: ^12.4
- typo3/cms-core: ^12.4
- typo3/cms-extbase: ^12.4
- typo3/cms-frontend: ^12.4
- typo3/cms-rte-ckeditor: ^12.4
Requires (Dev)
- friendsofphp/php-cs-fixer: ^3.61
- friendsoftypo3/phpstan-typo3: ^0.9.0
- phpstan/phpstan: ^1.9
- phpstan/phpstan-deprecation-rules: ^1.2
- phpstan/phpstan-phpunit: ^1.3
- phpstan/phpstan-strict-rules: ^1.4
- squizlabs/php_codesniffer: ^3.7
- typo3/testing-framework: ^8.0.7
- dev-main / 13.0.x-dev
- dev-TYPO3_12 / 12.0.x-dev
- v12.0.4
- v12.0.3
- 12.0.2
- v12.0.1
- 12.0.0
- dev-TYPO3_11 / 11.0.x-dev
- v11.0.15
- 11.0.14
- v11.0.13
- v11.0.12
- 11.0.11
- 11.0.10
- v11.0.9
- v11.0.8
- 11.0.7
- v11.0.6
- v11.0.5
- v11.0.4
- v11.0.2
- v11.0.1
- v11.0.0
- dev-TYPO3_10 / 10.x-dev
- v10.2.5
- v10.2.4
- v10.2.1
- v10.2.0
- v10.1.0
- v10.0.0
- v9.0.5
- v9.0.4
- v9.0.3
- v9.0.2
- v9.0.1
- v9.0.0
- v8.9.0
- v8.8.0
- v8.7.8
- v8.7.7
- v8.7.6
- v8.7.5
- v8.7.4
- v8.7.3
- v8.7.2
- v8.7.1
- dev-dependabot/composer/typo3/testing-framework-tw-9.0.1
- dev-bugfix/make-style-drop-down-work-with-images
- dev-bugfix/read-tsconfig-settings
- dev-upgrade_testsuite_tea
- dev-sme_wip
- dev-readme
- dev-GH-167
- dev-DMKEBUSINESSGMBH-master
- dev-christian-fries-bugfix/235-dynamic-property
- dev-issue-214
This package is auto-updated.
Last update: 2024-11-22 11:34:22 UTC
README
Image support for CKEditor for TYPO3
This extension adds the TYPO3 image browser to CKEditor.
Add issues or explore the project on GitHub.
- Same image handling as rtehtmlarea (magic images, usual RTE TSConfig supported)
- Image browser as usual in e.g. FAL file selector
- Dialog for changing width, height, alt and title (aspect ratio automatically maintained)
Installation
-
Install the extension
-
with composer from packagist
composer req netresearch/rte-ckeditor-image
-
-
Add a preset for rte_ckeditor or override the default one (as below):
<?php // EXT:my_ext/ext_localconf.php` $GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']['default'] = 'EXT:my_ext/Configuration/RTE/Default.yaml';
# EXT:my_ext/Configuration/RTE/Default.yaml imports: # Import default RTE config (for example) - { resource: "EXT:rte_ckeditor/Configuration/RTE/Default.yaml" } # Import the image plugin configuration - { resource: "EXT:rte_ckeditor_image/Configuration/RTE/Plugin.yaml" } editor: config: # RTE default config removes image plugin - restore it: removePlugins: null toolbar: items: - '|' - insertImage
-
Enable RTE config preset (e.g.
default
)# Page TSConfig RTE.default.preset = default
-
Include extension Static Template file
- go to Template » Info/Modify » Edit whole template record » Includes
- choose
CKEditor Image Support
forInclude static (from extensions)
before the Fluid Styled content
Configuration
(optional) Configure the Extension Configuration for this extension:
fetchExternalImages: By default, if an img source is an external URL, this image will be fetched and uploaded to the current BE users uploads folder. The default behaviour can be turned off with this option.
Maximum width/height
The maximum dimensions relate to the configuration for magic images which have to be set in Page TSConfig:
# Page TSConfig
RTE.default.buttons.image.options.magic {
# Default: 300
maxWidth = 1020
# Default: 1000
maxHeight = 800
}
Current versions of TYPO3 won't render TSConfig settings correctly out of custom template extensions (see the corresponding T3 bug: https://forge.typo3.org/issues/87068). In this case just add the settings to root page config.
Usage as lightbox with fluid_styled_content
# Template Constants
styles.content.textmedia.linkWrap.lightboxEnabled = 1
Configure a default css class for every image
# TS Setup
lib.parseFunc_RTE {
// default class for images in bodytext:
nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib.class {
default = my-custom-class
}
}
Image lazyload support
The extension supports TYPO3 lazyload handling (fluid_styled_content) for native browser lazyload.
# Template Constants type=options[lazy,eager,auto]
styles.content.image.lazyLoading = lazy
Allowed extensions
By default, the extensions from $TYPO3_CONF_VARS['GFX']['imagefile_ext']
are allowed. However, you can override this for CKEditor by adding the following to your YAML configuration:
editor: externalPlugins: typo3image: allowedExtensions: "jpg,jpeg,png"
Deployment
- developed on GitHub
- composer repository
- new version will automatically be uploaded to TER via Github Action when creating a new Github release