TYPO3 create a CKEditor plugin

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
● 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`

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

15
So lets add our button
'use strict';
(function () {
editor.ui.addButton( 'ExamplePlugin', {
label: 'My button',
toolbar: 'basicstyles'
});
}
});
})();

16
Select a visible toolbar
'use strict';
(function () {
label: 'My button',
toolbar: 'basicstyles'
});
}
});
})();

18
Add some magic to the button
label: 'My button',
toolbar: 'basicstyles',
command: 'insertTimestamp'
});
editor.addCommand( 'insertTimestamp', {
exec: function( editor ) {}
});
}
});

19
Add some magic to the button
label: 'My button',
});
editor.addCommand( 'insertTimestamp', {
exec: function( editor ) {
var now = new Date();
editor.insertHtml(
'The current date and time is: ' +
now.toString() + ''
);
}
});
}
});

21
But we want a icon
icons: 'example_plugin',
label: 'My button',
});
……
}
});

23
RTFM
important:
matching the button name, in lowercase

24
Let try again
icons: 'exampleplugin',
label: 'My button',
});
……
}
});

26
Now lets use the TYPO3 modal
label: 'My button',
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'
);
});
}

29
Get selected text
var selection = editor.getSelection(),
content = 'No text selected';
if (selection && selection.getSelectedText()) {
content =
'You selected: ' +
selection.getSelectedText();
}
require([
Modal.show(
'Example plugin',
content
);
});
}

31
Interact with the editor
var selection = editor.getSelection(),
content = 'No text selected';
require([
content = 'Remove: ' +
Modal.confirm(
'Example plugin',
content
)
} else {
Modal.show(
'Example plugin',
content
);
}
});
}

32
Interact with the editor
content = 'Remove: ' +
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
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
var url = editor.config.example_plugin.routeUrl;
require([
Modal.advanced({
type: Modal.types.iframe,
title: 'Example plugin',
content: url,
size: Modal.sizes.large
});
});
}

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

TYPO3 create a CKEditor plugin

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie TYPO3 create a CKEditor plugin

Ähnlich wie TYPO3 create a CKEditor plugin (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

TYPO3 create a CKEditor plugin