Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

of

TYPO3 create a CKEditor plugin Slide 1 TYPO3 create a CKEditor plugin Slide 2 TYPO3 create a CKEditor plugin Slide 3 TYPO3 create a CKEditor plugin Slide 4 TYPO3 create a CKEditor plugin Slide 5 TYPO3 create a CKEditor plugin Slide 6 TYPO3 create a CKEditor plugin Slide 7 TYPO3 create a CKEditor plugin Slide 8 TYPO3 create a CKEditor plugin Slide 9 TYPO3 create a CKEditor plugin Slide 10 TYPO3 create a CKEditor plugin Slide 11 TYPO3 create a CKEditor plugin Slide 12 TYPO3 create a CKEditor plugin Slide 13 TYPO3 create a CKEditor plugin Slide 14 TYPO3 create a CKEditor plugin Slide 15 TYPO3 create a CKEditor plugin Slide 16 TYPO3 create a CKEditor plugin Slide 17 TYPO3 create a CKEditor plugin Slide 18 TYPO3 create a CKEditor plugin Slide 19 TYPO3 create a CKEditor plugin Slide 20 TYPO3 create a CKEditor plugin Slide 21 TYPO3 create a CKEditor plugin Slide 22 TYPO3 create a CKEditor plugin Slide 23 TYPO3 create a CKEditor plugin Slide 24 TYPO3 create a CKEditor plugin Slide 25 TYPO3 create a CKEditor plugin Slide 26 TYPO3 create a CKEditor plugin Slide 27 TYPO3 create a CKEditor plugin Slide 28 TYPO3 create a CKEditor plugin Slide 29 TYPO3 create a CKEditor plugin Slide 30 TYPO3 create a CKEditor plugin Slide 31 TYPO3 create a CKEditor plugin Slide 32 TYPO3 create a CKEditor plugin Slide 33 TYPO3 create a CKEditor plugin Slide 34 TYPO3 create a CKEditor plugin Slide 35 TYPO3 create a CKEditor plugin Slide 36 TYPO3 create a CKEditor plugin Slide 37
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

3 Likes

Share

Download to read offline

TYPO3 create a CKEditor plugin

Download to read offline

TYPO3 8LTS comes now with the CKEditor. How can I create/integrate a custom plugin for this new RTE.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

TYPO3 create a CKEditor plugin

  1. 1. Create a TYPO3/CKEditor plugin
  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 did we 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 allowed ● Defines what plugin’s to load ● Defines database processing `RTE.proc`
  7. 7. 7 Our goal for today
  8. 8. 8 What do we want ● A custom button in the toolbar of the RTE ● Some magic happening when I click that button
  9. 9. 9 What do we need ● Our own plugin.js ● A way to tell TYPO3 to use our plugin ● An icon for our button
  10. 10. 10 Our plugin javascrip file 'use strict'; (function () { CKEDITOR.plugins.add('example_plugin', { init: function (editor) { console.log('example_plugin is loaded'); } }); })(); EXT:config_examples/Resources/Public/CkEditorPlugins/example_plugin.js
  11. 11. 11 Tell TYPO3 to use our plugin # Load default processing options imports: - { resource: "EXT:config_examples/Configuration/RTE/Default.yaml" } editor: # Load my plugin as external plugin externalPlugins: example_plugin: { resource: "EXT:...path.../example_plugin.js" } EXT:config_examples/Configuration/RTE/PluginExample.yaml // Register or own text-element config $GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']['plugin-example'] = 'EXT:config_examples/Configuration/RTE/PluginExample.yaml'; EXT:config_examples/ext_localconf.php
  12. 12. 12 Tell TYPO3 to use our preset RTE.default.preset = plugin-example PageTS
  13. 13. 13 Override default preset // Set your own default RTE config $GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']['default'] = 'EXT:config_examples/Configuration/RTE/PluginExample.yaml'; ext_localconf.php
  14. 14. 14 Our result
  15. 15. 15 So lets add our button 'use strict'; (function () { CKEDITOR.plugins.add('example_plugin', { init: function (editor) { editor.ui.addButton( 'ExamplePlugin', { label: 'My button', toolbar: 'basicstyles' }); } }); })(); EXT:config_examples/Resources/Public/CkEditorPlugins/example_plugin.js
  16. 16. 16 Select a visible toolbar 'use strict'; (function () { CKEDITOR.plugins.add('example_plugin', { init: function (editor) { editor.ui.addButton( 'ExamplePlugin', { label: 'My button', toolbar: 'basicstyles' }); } }); })(); EXT:config_examples/Resources/Public/CkEditorPlugins/example_plugin.js
  17. 17. 17 Cool we have a button
  18. 18. 18 Add some magic to the button CKEDITOR.plugins.add('example_plugin', { init: function (editor) { editor.ui.addButton( 'ExamplePlugin', { label: 'My button', toolbar: 'basicstyles', command: 'insertTimestamp' }); editor.addCommand( 'insertTimestamp', { exec: function( editor ) {} }); } });
  19. 19. 19 Add some magic to the button CKEDITOR.plugins.add('example_plugin', { init: function (editor) { editor.ui.addButton( 'ExamplePlugin', { label: 'My button', toolbar: 'basicstyles', command: 'insertTimestamp' }); editor.addCommand( 'insertTimestamp', { exec: function( editor ) { var now = new Date(); editor.insertHtml( 'The current date and time is: <em>' + now.toString() + '</em>' ); } }); } });
  20. 20. 20 The magic works
  21. 21. 21 But we want a icon CKEDITOR.plugins.add('example_plugin', { icons: 'example_plugin', init: function (editor) { editor.ui.addButton( 'ExamplePlugin', { label: 'My button', toolbar: 'basicstyles', command: 'insertTimestamp' }); …… } });
  22. 22. 22 ? still no icon :(
  23. 23. 23 RTFM important: matching the button name, in lowercase
  24. 24. 24 Let try again CKEDITOR.plugins.add('example_plugin', { icons: 'exampleplugin', init: function (editor) { editor.ui.addButton( 'ExamplePlugin', { label: 'My button', toolbar: 'basicstyles', command: 'insertTimestamp' }); …… } });
  25. 25. 25 Yes we have got an icon!
  26. 26. 26 Now lets use the TYPO3 modal CKEDITOR.plugins.add('example_plugin', { init: function (editor) { editor.ui.addButton( 'ExamplePlugin', { label: 'My button', toolbar: 'basicstyles', command: 'openExampleModal' }); editor.addCommand( 'openExampleModal', { exec: openModal }); } });
  27. 27. 27 Now lets use the TYPO3 modal …… editor.addCommand( 'openExampleModal', { exec: openModal }); } }); function openModal(editor) { require([ 'TYPO3/CMS/Backend/Modal' ], function (Modal) { Modal.show( 'Example plugin', 'hi' ); }); }
  28. 28. 28 Our modal
  29. 29. 29 Get selected text function openModal(editor) { var selection = editor.getSelection(), content = 'No text selected'; if (selection && selection.getSelectedText()) { content = '<em>You selected:</em> ' + selection.getSelectedText(); } require([ 'TYPO3/CMS/Backend/Modal' ], function (Modal) { Modal.show( 'Example plugin', content ); }); }
  30. 30. 30 Selected text
  31. 31. 31 Interact with the editor function openModal(editor) { var selection = editor.getSelection(), content = 'No text selected'; require([ 'TYPO3/CMS/Backend/Modal' ], function (Modal) { if (selection && selection.getSelectedText()) { content = '<em>Remove:</em> ' + selection.getSelectedText(); Modal.confirm( 'Example plugin', content ) } else { Modal.show( 'Example plugin', content ); } }); }
  32. 32. 32 Interact with the editor if (selection && selection.getSelectedText()) { content = '<em>Remove:</em> ' + selection.getSelectedText(); Modal.confirm( 'Example plugin', content ).on('confirm.button.cancel', function () { Modal.dismiss(); }).on('confirm.button.ok', function () { var range = editor.getSelection().getRanges()[0]; range.deleteContents(); range.select(); Modal.dismiss(); }); } else { ...
  33. 33. 33 Interaction
  34. 34. 34 Load stuff over ajax editor: # Load my plugin as external plugin externalPlugins: example_plugin: resource: "EXT:config_example...EditorPlugins/example_plugin.js" route: "configexamples_some_route" EXT:config_examples/Configuration/RTE/PluginExample.yaml
  35. 35. 35 Use route in your plugin function openModal(editor) { var url = editor.config.example_plugin.routeUrl; require([ 'TYPO3/CMS/Backend/Modal' ], function (Modal) { Modal.advanced({ type: Modal.types.iframe, title: 'Example plugin', content: url, size: Modal.sizes.large }); }); }
  36. 36. 36 Questions?
  37. 37. 37 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
  • ebilel

    May. 10, 2019
  • cwcruge

    Sep. 26, 2018
  • AlineVandecasteele

    Jun. 13, 2017

TYPO3 8LTS comes now with the CKEditor. How can I create/integrate a custom plugin for this new RTE.

Views

Total views

2,491

On Slideshare

0

From embeds

0

Number of embeds

19

Actions

Downloads

16

Shares

0

Comments

0

Likes

3

×