TYPO3 CKeditor for Integrators

1. TYPO3 htmlarea → CKEditor

2. 2
About me
Frans Saris
developer @beech.it
TYPO3 core/extension dev
slack: minifranske
twitter: @franssaris
github: fsaris & frans-beech-it
Beech.it
first TYPO3 partner worldwide
website: www.beech.it
github: github.com/beechit/

3. 3
Why the switch to CKEditor?
● We don’t have to fully maintain it our self
● Superb browser support
● Complying with the latest web accessibility
standards
● Inline editing features
● Advanced Content Filter

4. 4
Big changes
● Presets in YAML
● No automatic migration of existing configs
● <p> are now saved in database!
● No <typolink> anymore

5. 5
Why YAML?
● CKEditor uses plain javascript for
configuration
● typoscript for BE config is confusing for
newcomers
● A new structure (new start)
separate “processing” and Editor-related configuration
● Allows options to be extend
but no conditions or unsetting values

6. 6
Presets
● Defines editor appearance
● Defines what tags and styles are
● Defines what plugin’s to load
● Defines database processing `RTE.proc`

7. 7
default

8. 8
minimal

9. 9
full

10. 10
Add your own preset
// Register or own text-element config
$GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']['text-element']
= 'EXT:config_examples/Configuration/RTE/TextElement.yaml';
ext_localconf.php

11. 11
Configure your own preset
# Load default processing options
imports:
- { resource: "EXT:rte_ckeditor/Configuration/RTE/Processing.yaml" }
- { resource: "EXT:rte_ckeditor/Configuration/RTE/Editor/Base.yaml" }
# Minimal configuration for the editor
editor:
config:
stylesSet: []
toolbarGroups:
- { name: basicstyles, groups: [ basicstyles] }
removeButtons:
- Underline
- Strike
EXT:config_examples/Configuration/RTE/TextElement.yaml

12. 12
Configure your own preset
# Load default processing options
imports:
- { resource: "EXT:rte_ckeditor/.../RTE/Processing.yaml" }
- { resource: "EXT:rte_ckeditor/.../RTE/Editor/Base.yaml" }

13. 13
Configure your own preset
# Minimal configuration for the editor
editor:
config:
stylesSet: []
toolbarGroups:
- { name: basicstyles, groups: [ basicstyles] }
removeButtons:
- Underline
- Strike
yaml

14. 14
Configure your own preset
CKEDITOR.editorConfig = function( config ) {
config.toolbarGroups = [
{ name: 'basicstyles', groups: [ 'basicstyles' ] }
];
config.removeButtons = 'Underline,Strike';
};
http://ckeditor.com/tmp/4.5.0-beta/ckeditor/samples/toolbarconfigurator/ js
editor:
config:
stylesSet: []
toolbarGroups:
- { name: basicstyles, groups: [ basicstyles] }
RemoveButtons:
- Underline
- Strike
yaml

15. 15
Configure your own preset
# Minimal configuration for the editor
editor:
Config:
# Ensure the key exists else the editor will not load
stylesSet: []
toolbarGroups:
- { name: basicstyles, groups: [ basicstyles] }
removeButtons:
- Underline
- Strike
yaml

16. 16
Configure your own preset
editor:
config:
stylesSet:
# block level styles
- { name: "Orange title H2", element: "h2", styles: { color: "orange", background: "blue" } }
- { name: "Orange title H3", element: "h3", styles: { color: "orange", background: "blue" } }
- { name: "Quote / Citation", element: "blockquote" }
- { name: "Code block", element: "code" }
# Inline styles
- { name: "Yellow marker", element: "span", styles: { background-color: "yellow" } }
yaml

17. 17
Configure your own preset
editor:
config:
format_tags: "p;h2;h3;pre"
yaml

18. 18
Migrate old button config
editor:
config:
toolbar:
- [ 'Bold', 'Italic', 'Underline', '-']
- [ 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ]
- [ 'NumberedList', 'BulletedList', '-', 'Indent', 'Outdent' ]
- '/'
- [ 'HorizontalRule', 'Link', 'RemoveFormat', '-' ]
- [ 'Copy', 'Cut', 'Paste', '-', 'Undo', 'Redo' ]
extraPlugins:
- justify
RTE.default {
showButtons (
bold, italic, underline,
left, center, right, justifyfull,
orderedlist, unorderedlist, indent, outdent,
line, link, removeformat,
copy, cut, paste, undo, redo
)
toolbarOrder (
bold, italic, underline, bar,
left, center, right, justifyfull,
orderedlist, unorderedlist, bar, indent, outdent, linebreak,
line, link, removeformat, bar,
copy, cut, paste, bar, undo, redo
)
} pageTS
yaml

19. 19
Use pageTS to set preset
RTE {
config {
tt_content {
bodytext {
types {
textmedia.preset = minimal
my_ce.preset = full
}
}
}
[table].[field].preset = something
}
}

20. 20
Use TCA to set preset
'content' => [
'label' => 'LLL:EXT:lang/Res...eneral.xlf:LGL.text',
'config' => [
'type' => 'text',
'cols' => 48,
'rows' => 5,
'enableRichtext' => true,
'richtextConfiguration' => 'minimal',
],

21. 21
Use TCA to set preset
'content' => [
'config' => [
'type' => 'text',
'enableRichtext' => true,
'richtextConfiguration' => 'minimal',
],
]
'content' => [
'config' => [
'type' => 'text',
]
'defaultExtras' => 'richtext:rte_transform[mode=ts_css]',
]
before TYPO3 8 LTS
since TYPO3 8 LTS

22. 22
Set default preset
# Set default RTE preset
RTE.default.preset = minimal
PageTSconfig

23. 23
Override default preset
// Set your own default RTE config
$GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']['default']
= 'EXT:config_examples/Configuration/RTE/Default.yaml';
ext_localconf.php

24. 24
Advanced Content Filter
● Only tags/classes/styles that are configured are
kept
● Filters content during editing and paste
● Enabled by default
● Makes `processing` config most of the times
obsolete “RTE.proc”
http://sdk.ckeditor.com/samples/acf.html

25. 25
Advanced Content Filter
# Disable Advanced Content Filter
editor:
config:
allowedContent: true
yaml

26. 26
But I don’t want to switch!
● Deprecated in TYPO3 8 LTS
● Moved to FriendsOfTYPO3/rtehtmlarea for 9
https://github.com/FriendsOfTYPO3/rtehtmlarea

27. 27
Questions?

28. 28
And now?
Some links
● https://github.com/frans-beech-it/t3ext-config_examples
● https://github.com/netresearch/t3x-rte_ckeditor_image
● https://typo3worx.eu/2017/02/configure-ckeditor-in-typo3/
● https://docs.typo3.org/typo3cms/extensions/core/C
hangelog/8.6/Feature-79216-AddYAMLConfigurationFo
rCKEditorRTE.html
● http://docs.ckeditor.com/#!/api/CKEDITOR.config