netresearch / rte-ckeditor-image
Image support in CKEditor for the TYPO3 ecosystem
Installs: 336 142
Dependents: 4
Suggesters: 0
Security: 0
Stars: 43
Watchers: 13
Forks: 37
Open Issues: 32
Type:typo3-cms-extension
Requires
- php: ^7.4 || ^8.0
- typo3/cms-core: ^11.5
Requires (Dev)
Replaces
- netresearch/rte_ckeditor_image: v11.0.4
- typo3-ter/rte-ckeditor-image: v11.0.4
- dev-master / 11.x-dev
- 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-TYPO3_9.x
- dev-issue-119_update-images-on-editor-load
- dev-i82_lazyload
- dev-i88_custom-css-class
- dev-i56_images-in-preview
- dev-TYPO3_8.7.x
This package is auto-updated.
Last update: 2022-07-21 14:09:55 UTC
README
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
-
Activate the extension
-
in Extension Manager
-
via command line
./typo3/cli_dispatch.phpsh extbase extension:install 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
-
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)
Configuration
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 {
maxWidth = 1020 # Default: 300
maxHeight = 800 # Default: 1000
}
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
- automatically tested and released to TER via travis