SlideShare a Scribd company logo
1 of 37
Download to read offline
Create a TYPO3/CKEditor plugin
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
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
Big changes
● Presets in YAML
● No automatic migration of existing configs
● <p> are now saved in database!
● No <typolink> anymore
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
Presets
● Defines editor appearance
● Defines what tags and styles are allowed
● Defines what plugin’s to load
● Defines database processing `RTE.proc`
7
Our goal for today
8
What do we want
● A custom button in the toolbar of the RTE
● Some magic happening when I click that button
9
What do we need
● Our own plugin.js
● A way to tell TYPO3 to use our plugin
● An icon for our button
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
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
Tell TYPO3 to use our preset
RTE.default.preset = plugin-example
PageTS
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
Our result
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
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
Cool we have a button
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
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
The magic works
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
? still no icon :(
23
RTFM
important:
matching the button name, in lowercase
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
Yes we have got an icon!
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
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
Our modal
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
Selected text
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
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
Interaction
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
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
Questions?
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

More Related Content

What's hot

Installing odoo v8 from github
Installing odoo v8 from githubInstalling odoo v8 from github
Installing odoo v8 from githubAntony Gitomeh
 
Introducing DeploYii 0.5
Introducing DeploYii 0.5Introducing DeploYii 0.5
Introducing DeploYii 0.5Giovanni Derks
 
Headless Drupal
Headless DrupalHeadless Drupal
Headless Drupaldrubb
 
How to configure PyCharm for Odoo development in Windows?
How to configure PyCharm for Odoo development in Windows?How to configure PyCharm for Odoo development in Windows?
How to configure PyCharm for Odoo development in Windows?Celine George
 
Odoo development workflow with pip and virtualenv
Odoo development workflow with pip and virtualenvOdoo development workflow with pip and virtualenv
Odoo development workflow with pip and virtualenvacsone
 
Composer & Drupal
Composer & DrupalComposer & Drupal
Composer & Drupaldrubb
 
Code Splitting in Practice - Shanghai JS Meetup May 2016
Code Splitting in Practice - Shanghai JS Meetup May 2016Code Splitting in Practice - Shanghai JS Meetup May 2016
Code Splitting in Practice - Shanghai JS Meetup May 2016Wiredcraft
 
mapserver_install_linux
mapserver_install_linuxmapserver_install_linux
mapserver_install_linuxtutorialsruby
 
Datagrids with Symfony 2, Backbone and Backgrid
Datagrids with Symfony 2, Backbone and BackgridDatagrids with Symfony 2, Backbone and Backgrid
Datagrids with Symfony 2, Backbone and Backgrideugenio pombi
 
Drupal 8: frontend development
Drupal 8: frontend developmentDrupal 8: frontend development
Drupal 8: frontend developmentsparkfabrik
 
Speed up the site building with Drupal's Bootstrap Layout Builder
Speed up the site building with Drupal's Bootstrap Layout BuilderSpeed up the site building with Drupal's Bootstrap Layout Builder
Speed up the site building with Drupal's Bootstrap Layout BuilderDrupalCamp Kyiv
 
ZopeSkel & Buildout packages
ZopeSkel & Buildout packagesZopeSkel & Buildout packages
ZopeSkel & Buildout packagesQuintagroup
 
How to host an app for $20 in 20min using buildout and hostout
How to host an app  for $20 in 20min using buildout and hostoutHow to host an app  for $20 in 20min using buildout and hostout
How to host an app for $20 in 20min using buildout and hostoutDylan Jay
 
第1回名古屋Grails/Groogy勉強会「Grailsを始めてみよう!」
第1回名古屋Grails/Groogy勉強会「Grailsを始めてみよう!」第1回名古屋Grails/Groogy勉強会「Grailsを始めてみよう!」
第1回名古屋Grails/Groogy勉強会「Grailsを始めてみよう!」Tsuyoshi Yamamoto
 
Frameworks da nova Era PHP FuelPHP
Frameworks da nova Era PHP FuelPHPFrameworks da nova Era PHP FuelPHP
Frameworks da nova Era PHP FuelPHPDan Jesus
 
Development Workflow Tools for Open-Source PHP Libraries
Development Workflow Tools for Open-Source PHP LibrariesDevelopment Workflow Tools for Open-Source PHP Libraries
Development Workflow Tools for Open-Source PHP LibrariesPantheon
 
Service Oriented Architecture in Magento 2
Service Oriented Architecture in Magento 2Service Oriented Architecture in Magento 2
Service Oriented Architecture in Magento 2Max Pronko
 
Adding powerful ext js components to react apps
Adding powerful ext js components to react appsAdding powerful ext js components to react apps
Adding powerful ext js components to react appsSandeep Adwankar
 
Introducing ExtReact: Adding Powerful Sencha Components to React Apps
Introducing ExtReact: Adding Powerful Sencha Components to React AppsIntroducing ExtReact: Adding Powerful Sencha Components to React Apps
Introducing ExtReact: Adding Powerful Sencha Components to React AppsSencha
 

What's hot (20)

Installing odoo v8 from github
Installing odoo v8 from githubInstalling odoo v8 from github
Installing odoo v8 from github
 
Introducing DeploYii 0.5
Introducing DeploYii 0.5Introducing DeploYii 0.5
Introducing DeploYii 0.5
 
Headless Drupal
Headless DrupalHeadless Drupal
Headless Drupal
 
How to configure PyCharm for Odoo development in Windows?
How to configure PyCharm for Odoo development in Windows?How to configure PyCharm for Odoo development in Windows?
How to configure PyCharm for Odoo development in Windows?
 
Odoo development workflow with pip and virtualenv
Odoo development workflow with pip and virtualenvOdoo development workflow with pip and virtualenv
Odoo development workflow with pip and virtualenv
 
Composer & Drupal
Composer & DrupalComposer & Drupal
Composer & Drupal
 
Code Splitting in Practice - Shanghai JS Meetup May 2016
Code Splitting in Practice - Shanghai JS Meetup May 2016Code Splitting in Practice - Shanghai JS Meetup May 2016
Code Splitting in Practice - Shanghai JS Meetup May 2016
 
mapserver_install_linux
mapserver_install_linuxmapserver_install_linux
mapserver_install_linux
 
Datagrids with Symfony 2, Backbone and Backgrid
Datagrids with Symfony 2, Backbone and BackgridDatagrids with Symfony 2, Backbone and Backgrid
Datagrids with Symfony 2, Backbone and Backgrid
 
Drupal 8: frontend development
Drupal 8: frontend developmentDrupal 8: frontend development
Drupal 8: frontend development
 
Alfredo-PUMEX
Alfredo-PUMEXAlfredo-PUMEX
Alfredo-PUMEX
 
Speed up the site building with Drupal's Bootstrap Layout Builder
Speed up the site building with Drupal's Bootstrap Layout BuilderSpeed up the site building with Drupal's Bootstrap Layout Builder
Speed up the site building with Drupal's Bootstrap Layout Builder
 
ZopeSkel & Buildout packages
ZopeSkel & Buildout packagesZopeSkel & Buildout packages
ZopeSkel & Buildout packages
 
How to host an app for $20 in 20min using buildout and hostout
How to host an app  for $20 in 20min using buildout and hostoutHow to host an app  for $20 in 20min using buildout and hostout
How to host an app for $20 in 20min using buildout and hostout
 
第1回名古屋Grails/Groogy勉強会「Grailsを始めてみよう!」
第1回名古屋Grails/Groogy勉強会「Grailsを始めてみよう!」第1回名古屋Grails/Groogy勉強会「Grailsを始めてみよう!」
第1回名古屋Grails/Groogy勉強会「Grailsを始めてみよう!」
 
Frameworks da nova Era PHP FuelPHP
Frameworks da nova Era PHP FuelPHPFrameworks da nova Era PHP FuelPHP
Frameworks da nova Era PHP FuelPHP
 
Development Workflow Tools for Open-Source PHP Libraries
Development Workflow Tools for Open-Source PHP LibrariesDevelopment Workflow Tools for Open-Source PHP Libraries
Development Workflow Tools for Open-Source PHP Libraries
 
Service Oriented Architecture in Magento 2
Service Oriented Architecture in Magento 2Service Oriented Architecture in Magento 2
Service Oriented Architecture in Magento 2
 
Adding powerful ext js components to react apps
Adding powerful ext js components to react appsAdding powerful ext js components to react apps
Adding powerful ext js components to react apps
 
Introducing ExtReact: Adding Powerful Sencha Components to React Apps
Introducing ExtReact: Adding Powerful Sencha Components to React AppsIntroducing ExtReact: Adding Powerful Sencha Components to React Apps
Introducing ExtReact: Adding Powerful Sencha Components to React Apps
 

Similar to TYPO3 create a CKEditor plugin

2017 - TYPO3 CertiFUNcation: Frans Saris - TYPO3 CKeditor for Integrators
2017 - TYPO3 CertiFUNcation: Frans Saris - TYPO3 CKeditor for Integrators2017 - TYPO3 CertiFUNcation: Frans Saris - TYPO3 CKeditor for Integrators
2017 - TYPO3 CertiFUNcation: Frans Saris - TYPO3 CKeditor for IntegratorsTYPO3 CertiFUNcation
 
TYPO3 6.1. What's new
TYPO3 6.1. What's newTYPO3 6.1. What's new
TYPO3 6.1. What's newRafal Brzeski
 
Nagios Conference 2013 - Jake Omann - Developing Nagios XI Components and Wiz...
Nagios Conference 2013 - Jake Omann - Developing Nagios XI Components and Wiz...Nagios Conference 2013 - Jake Omann - Developing Nagios XI Components and Wiz...
Nagios Conference 2013 - Jake Omann - Developing Nagios XI Components and Wiz...Nagios
 
PYTHONNANGCAO_1.GUI.Creating the GUI Form and Adding Widgets.pptx
PYTHONNANGCAO_1.GUI.Creating the GUI Form and Adding Widgets.pptxPYTHONNANGCAO_1.GUI.Creating the GUI Form and Adding Widgets.pptx
PYTHONNANGCAO_1.GUI.Creating the GUI Form and Adding Widgets.pptxTrangNguyenThiHuyen6
 
Creating a Smooth Development Workflow for High-Quality Modular Open-Source P...
Creating a Smooth Development Workflow for High-Quality Modular Open-Source P...Creating a Smooth Development Workflow for High-Quality Modular Open-Source P...
Creating a Smooth Development Workflow for High-Quality Modular Open-Source P...Pantheon
 
EuroPython 2013 - Python3 TurboGears Training
EuroPython 2013 - Python3 TurboGears TrainingEuroPython 2013 - Python3 TurboGears Training
EuroPython 2013 - Python3 TurboGears TrainingAlessandro Molina
 
Streamlining React Component Development and Sharing with bit.pptx
Streamlining React Component Development and Sharing with bit.pptxStreamlining React Component Development and Sharing with bit.pptx
Streamlining React Component Development and Sharing with bit.pptxShubhamJayswal6
 
Introduction to Griffon
Introduction to GriffonIntroduction to Griffon
Introduction to GriffonJames Williams
 
Python is a high-level, general-purpose programming language. Its design phil...
Python is a high-level, general-purpose programming language. Its design phil...Python is a high-level, general-purpose programming language. Its design phil...
Python is a high-level, general-purpose programming language. Its design phil...bhargavi804095
 
Git & version control crash course
Git & version control crash course Git & version control crash course
Git & version control crash course Eslam Saeed
 
TYPO3 + CKEditor: Heaven for TYPO3 Developer & Editor
TYPO3 + CKEditor: Heaven for TYPO3 Developer & EditorTYPO3 + CKEditor: Heaven for TYPO3 Developer & Editor
TYPO3 + CKEditor: Heaven for TYPO3 Developer & EditorNITSAN Technologies
 
Copy text to clipboard using vue-clipboard2 - Vue.js
Copy text to clipboard using vue-clipboard2 - Vue.jsCopy text to clipboard using vue-clipboard2 - Vue.js
Copy text to clipboard using vue-clipboard2 - Vue.jsYogesh singh
 
Creating Extensible Plugins for WordPress
Creating Extensible Plugins for WordPressCreating Extensible Plugins for WordPress
Creating Extensible Plugins for WordPressHristo Chakarov
 
Advanced Dagger talk from 360andev
Advanced Dagger talk from 360andevAdvanced Dagger talk from 360andev
Advanced Dagger talk from 360andevMike Nakhimovich
 
How to create an Angular builder
How to create an Angular builderHow to create an Angular builder
How to create an Angular builderMaurizio Vitale
 
Introduction to git and Github
Introduction to git and GithubIntroduction to git and Github
Introduction to git and GithubWycliff1
 
Creating Openbravo Workspace Widgets
Creating Openbravo Workspace WidgetsCreating Openbravo Workspace Widgets
Creating Openbravo Workspace WidgetsRob Goris
 
Matt Gauger - Git & Github web414 December 2010
Matt Gauger - Git & Github web414 December 2010Matt Gauger - Git & Github web414 December 2010
Matt Gauger - Git & Github web414 December 2010Matt Gauger
 
Lab StepsSTEP 1 Login Form1. In order to do this lab, we need.docx
Lab StepsSTEP 1 Login Form1. In order to do this lab, we need.docxLab StepsSTEP 1 Login Form1. In order to do this lab, we need.docx
Lab StepsSTEP 1 Login Form1. In order to do this lab, we need.docxsmile790243
 
Git, Docker, Python Package and Module
Git, Docker, Python Package and ModuleGit, Docker, Python Package and Module
Git, Docker, Python Package and ModuleNovita Sari
 

Similar to TYPO3 create a CKEditor plugin (20)

2017 - TYPO3 CertiFUNcation: Frans Saris - TYPO3 CKeditor for Integrators
2017 - TYPO3 CertiFUNcation: Frans Saris - TYPO3 CKeditor for Integrators2017 - TYPO3 CertiFUNcation: Frans Saris - TYPO3 CKeditor for Integrators
2017 - TYPO3 CertiFUNcation: Frans Saris - TYPO3 CKeditor for Integrators
 
TYPO3 6.1. What's new
TYPO3 6.1. What's newTYPO3 6.1. What's new
TYPO3 6.1. What's new
 
Nagios Conference 2013 - Jake Omann - Developing Nagios XI Components and Wiz...
Nagios Conference 2013 - Jake Omann - Developing Nagios XI Components and Wiz...Nagios Conference 2013 - Jake Omann - Developing Nagios XI Components and Wiz...
Nagios Conference 2013 - Jake Omann - Developing Nagios XI Components and Wiz...
 
PYTHONNANGCAO_1.GUI.Creating the GUI Form and Adding Widgets.pptx
PYTHONNANGCAO_1.GUI.Creating the GUI Form and Adding Widgets.pptxPYTHONNANGCAO_1.GUI.Creating the GUI Form and Adding Widgets.pptx
PYTHONNANGCAO_1.GUI.Creating the GUI Form and Adding Widgets.pptx
 
Creating a Smooth Development Workflow for High-Quality Modular Open-Source P...
Creating a Smooth Development Workflow for High-Quality Modular Open-Source P...Creating a Smooth Development Workflow for High-Quality Modular Open-Source P...
Creating a Smooth Development Workflow for High-Quality Modular Open-Source P...
 
EuroPython 2013 - Python3 TurboGears Training
EuroPython 2013 - Python3 TurboGears TrainingEuroPython 2013 - Python3 TurboGears Training
EuroPython 2013 - Python3 TurboGears Training
 
Streamlining React Component Development and Sharing with bit.pptx
Streamlining React Component Development and Sharing with bit.pptxStreamlining React Component Development and Sharing with bit.pptx
Streamlining React Component Development and Sharing with bit.pptx
 
Introduction to Griffon
Introduction to GriffonIntroduction to Griffon
Introduction to Griffon
 
Python is a high-level, general-purpose programming language. Its design phil...
Python is a high-level, general-purpose programming language. Its design phil...Python is a high-level, general-purpose programming language. Its design phil...
Python is a high-level, general-purpose programming language. Its design phil...
 
Git & version control crash course
Git & version control crash course Git & version control crash course
Git & version control crash course
 
TYPO3 + CKEditor: Heaven for TYPO3 Developer & Editor
TYPO3 + CKEditor: Heaven for TYPO3 Developer & EditorTYPO3 + CKEditor: Heaven for TYPO3 Developer & Editor
TYPO3 + CKEditor: Heaven for TYPO3 Developer & Editor
 
Copy text to clipboard using vue-clipboard2 - Vue.js
Copy text to clipboard using vue-clipboard2 - Vue.jsCopy text to clipboard using vue-clipboard2 - Vue.js
Copy text to clipboard using vue-clipboard2 - Vue.js
 
Creating Extensible Plugins for WordPress
Creating Extensible Plugins for WordPressCreating Extensible Plugins for WordPress
Creating Extensible Plugins for WordPress
 
Advanced Dagger talk from 360andev
Advanced Dagger talk from 360andevAdvanced Dagger talk from 360andev
Advanced Dagger talk from 360andev
 
How to create an Angular builder
How to create an Angular builderHow to create an Angular builder
How to create an Angular builder
 
Introduction to git and Github
Introduction to git and GithubIntroduction to git and Github
Introduction to git and Github
 
Creating Openbravo Workspace Widgets
Creating Openbravo Workspace WidgetsCreating Openbravo Workspace Widgets
Creating Openbravo Workspace Widgets
 
Matt Gauger - Git & Github web414 December 2010
Matt Gauger - Git & Github web414 December 2010Matt Gauger - Git & Github web414 December 2010
Matt Gauger - Git & Github web414 December 2010
 
Lab StepsSTEP 1 Login Form1. In order to do this lab, we need.docx
Lab StepsSTEP 1 Login Form1. In order to do this lab, we need.docxLab StepsSTEP 1 Login Form1. In order to do this lab, we need.docx
Lab StepsSTEP 1 Login Form1. In order to do this lab, we need.docx
 
Git, Docker, Python Package and Module
Git, Docker, Python Package and ModuleGit, Docker, Python Package and Module
Git, Docker, Python Package and Module
 

Recently uploaded

DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningLars Bell
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr BaganFwdays
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenHervé Boutemy
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxLoriGlavin3
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc
 
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...Scott Andery
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity PlanDatabarracks
 
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .Alan Dix
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfAddepto
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Manik S Magar
 
Visualising and forecasting stocks using Dash
Visualising and forecasting stocks using DashVisualising and forecasting stocks using Dash
Visualising and forecasting stocks using Dashnarutouzumaki53779
 
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...AliaaTarek5
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024Lonnie McRorey
 
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersGenerative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersRaghuram Pandurangan
 
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfWhat is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfMounikaPolabathina
 
Time Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsTime Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsNathaniel Shimoni
 
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rick Flair
 

Recently uploaded (20)

DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine Tuning
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
 
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity Plan
 
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdf
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
 
Visualising and forecasting stocks using Dash
Visualising and forecasting stocks using DashVisualising and forecasting stocks using Dash
Visualising and forecasting stocks using Dash
 
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024
 
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersGenerative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information Developers
 
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfWhat is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdf
 
Time Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsTime Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directions
 
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...
 

TYPO3 create a CKEditor plugin

  • 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 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 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 allowed ● Defines what plugin’s to load ● Defines database processing `RTE.proc`
  • 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 What do we need ● Our own plugin.js ● A way to tell TYPO3 to use our plugin ● An icon for our button
  • 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 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 Tell TYPO3 to use our preset RTE.default.preset = plugin-example PageTS
  • 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
  • 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 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 Cool we have a button
  • 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 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>' ); } }); } });
  • 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 ? still no icon :(
  • 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 Yes we have got an icon!
  • 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 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' ); }); }
  • 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 ); }); }
  • 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 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 { ...
  • 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 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 }); }); }
  • 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