Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

TYPO3 CKEditor for integrators

Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Wird geladen in …3
×

Hier ansehen

1 von 28 Anzeige
Anzeige

Weitere Verwandte Inhalte

Diashows für Sie (20)

Ähnlich wie TYPO3 CKEditor for integrators (20)

Anzeige

Aktuellste (20)

TYPO3 CKEditor for integrators

  1. 1. TYPO3 htmlarea → CKEditor
  2. 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. 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. 4 Big changes ● Presets in YAML ● No automatic migration of existing configs ● <p> are now saved in database! ● No <typolink> anymore
  5. 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. 6 Presets ● Defines editor appearance ● Defines what tags and styles are ● Defines what plugin’s to load ● Defines database processing `RTE.proc`
  7. 7. 7 default
  8. 8. 8 minimal
  9. 9. 9 full
  10. 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. 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. 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. 13 Configure your own preset # Minimal configuration for the editor editor: config: stylesSet: [] toolbarGroups: - { name: basicstyles, groups: [ basicstyles] } removeButtons: - Underline - Strike yaml
  14. 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. 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. 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. 17 Configure your own preset editor: config: format_tags: "p;h2;h3;pre" yaml
  18. 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. 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. 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. 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. 22 Set default preset # Set default RTE preset RTE.default.preset = minimal PageTSconfig
  23. 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. 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. 25 Advanced Content Filter # Disable Advanced Content Filter editor: config: allowedContent: true yaml
  26. 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. 27 Questions?
  28. 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

×