Why did TYPO3 switch to CKEditor, what are these so called presets. And how about using external plugins or even creating a own plugin for CKEditor to use in TYPO3 8 LTS.
In this presentation I walk through these questions and show how to configure CKEditor for TYPO3 and create your own plugin.
(slides of my presentation hold @T3DD17 in Malmö, Sweden)
4. 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
8. Why YAML
8
■ 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
10. What do these presets do?
10
■ Define editor appearance
■ Define what tags and styles are allowed
■ Define what plugin’s to load
■ Define database processing `RTE.proc`
15. Add your own preset
15
// Register or own text-element config
$GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']['text-element'] =
'EXT:config_examples/Configuration/RTE/TextElement.yaml';
ext_localconf.php
24. Advanced Content Filter?
24
■ 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”
29. Using PageTS to define what specific preset to use
29
RTE {
config {
[table].[field].preset = something
[table].[field].types.[type].preset = something
}
}
30. RTE {
config {
tt_content {
bodytext {
preset = minimal
types {
textmedia.preset = default
my_ce.preset = full
}
}
}
}
}
Using PageTS to define preset to use
30
35. Adding plugins
35
■ Donwload from //ckeditor.com/addons/plugins
■ Add to EXT:my_ext/Resources/Public/Javascript/Plugins/*
■ Register it in your YAML as external plugin
40. Tell TYPO3 to use our plugin
40
# Load default processing options
imports:
- { resource: "EXT:rte_ckeditor/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
41. Tell TYPO3 to use our plugin
41
// Register or own plugin-example config
$GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']['plugin-example'] =
'EXT:config_examples/Configuration/RTE/PluginExample.yaml';
EXT:config_examples/ext_localconf.php
42. Tell TYPO3 to use our plugin
42
RTE.default.preset = plugin-example
PageTS
48. Add some magic to the button
48
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 ) {}
});
}
});
EXT:config_examples/Resources/Public/CkEditorPlugins/example_plugin.js
49. Add some magic to the button
49
editor.addCommand( 'insertTimestamp', {
exec: function( editor ) {
var now = new Date();
editor.insertHtml(
'The current date and time is: <em>' +
now.toString() + '</em>'
);
}
});
EXT:config_examples/Resources/Public/CkEditorPlugins/example_plugin.js
60. Do something with the selected text
60
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
);
}
});
61. Do something with the selected text
61
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();
});
64. Tell TYPO3 what route you want to use
64
editor:
# Load my plugin as external plugin
externalPlugins:
example_plugin:
resource: "EXT:...path.../example_plugin.js"
route: "configexamples_some_route"
EXT:config_examples/Configuration/RTE/PluginExample.yaml
65. Open an modal with iframe
65
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
});
});
}