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

Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdfSimplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdfFIDO Alliance
 
Breaking Down the Flutterwave Scandal What You Need to Know.pdf
Breaking Down the Flutterwave Scandal What You Need to Know.pdfBreaking Down the Flutterwave Scandal What You Need to Know.pdf
Breaking Down the Flutterwave Scandal What You Need to Know.pdfUK Journal
 
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfIntroduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfFIDO Alliance
 
A Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System StrategyA Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System StrategyUXDXConf
 
Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Patrick Viafore
 
Optimizing NoSQL Performance Through Observability
Optimizing NoSQL Performance Through ObservabilityOptimizing NoSQL Performance Through Observability
Optimizing NoSQL Performance Through ObservabilityScyllaDB
 
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdfHow Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdfFIDO Alliance
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceSamy Fodil
 
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...CzechDreamin
 
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptxWSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptxJennifer Lim
 
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)Julian Hyde
 
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...marcuskenyatta275
 
AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101vincent683379
 
What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024Stephanie Beckett
 
Demystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John StaveleyDemystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John StaveleyJohn Staveley
 
TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024Stephen Perrenod
 
How we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfHow we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfSrushith Repakula
 
Microsoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - QuestionnaireMicrosoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - QuestionnaireExakis Nelite
 
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...FIDO Alliance
 
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfLinux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfFIDO Alliance
 

Recently uploaded (20)

Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdfSimplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
 
Breaking Down the Flutterwave Scandal What You Need to Know.pdf
Breaking Down the Flutterwave Scandal What You Need to Know.pdfBreaking Down the Flutterwave Scandal What You Need to Know.pdf
Breaking Down the Flutterwave Scandal What You Need to Know.pdf
 
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfIntroduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
 
A Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System StrategyA Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System Strategy
 
Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024
 
Optimizing NoSQL Performance Through Observability
Optimizing NoSQL Performance Through ObservabilityOptimizing NoSQL Performance Through Observability
Optimizing NoSQL Performance Through Observability
 
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdfHow Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM Performance
 
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
 
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptxWSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
 
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
 
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
 
AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101
 
What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024
 
Demystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John StaveleyDemystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John Staveley
 
TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024
 
How we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfHow we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdf
 
Microsoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - QuestionnaireMicrosoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - Questionnaire
 
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
 
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfLinux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
 

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