HTMLarea to CKEditor - create presets and your own plugin for TYPO3

Frans Saris
2
■ developer @beech.it (in the Netherlands)
■ TYPO3 core/extension dev
■ slack/typo3.org: minifranske
■ twitter: @franssaris
■ github: fsaris - frans-beech-it - beechit

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

Big changes
6
■ Presets in YAML
■ are now saved in database!
■ No <typolink> anymore
■ No automatic migration of existing configs

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

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`

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

Configure your own preset
16
# Load default processing options
imports:
- { resource: "EXT:rte_ckeditor/Configuration/RTE/Processing.yaml" }
- { resource: "EXT:rte_ckeditor/Configuration/RTE/Editor/Base.yaml" }
# Minimal configuration for the editor
editor:
config:
toolbarGroups:
- { name: basicstyles, groups: [ basicstyles ] }
removeButtons:
- Underline
- Strike
EXT:config_examples/Configuration/RTE/TextElement.yaml

Configure your own preset
17
editor:
config:
# Limit the height of the editor
height: 200
extraPlugins:
- justify
removePlugins:
- image
YAML

CKEditor js to YAML
CKEDITOR.editorConfig = function( config ) {
config.toolbarGroups = [
{ name: 'basicstyles', groups: [ 'basicstyles' ] }
];
config.removeButtons = 'Underline,Strike';
};
http://ckeditor.com/tmp/4.5.0-beta/ckeditor/samples/toolbarconfigurator/ js
editor:
config:
toolbarGroups:
- { name: basicstyles, groups: [ basicstyles ] }
removeButtons:
- Underline
- Strike
YAML

Define some custom style options
19
editor:
config:
stylesSet:
# block level styles
- { name: "Orange title H2", element: "h2", styles: { color: "orange", background: "blue" } }
- { name: "Orange title H3", element: "h3", styles: { color: "orange", background: "blue" } }
- { name: "Quote / Citation", element: "blockquote" }
- { name: "Code block", element: "code" }
# Inline styles
- { name: "Yellow marker", element: "span", styles: { background-color: "yellow" } }
yaml

Paragraph format options
20
editor:
config:
format_tags: "p;h2;h3;pre"
http://docs.ckeditor.com/#!/guide/dev_format yaml

PageTS -> YAML
editor:
config:
toolbar:
- [ 'Bold', 'Italic', 'Underline', '-']
- [ 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ]
- [ 'NumberedList', 'BulletedList', '-', 'Indent', 'Outdent' ]
- '/'
- [ 'HorizontalRule', 'Link', 'RemoveFormat', '-' ]
- [ 'Copy', 'Cut', 'Paste', '-', 'Undo', 'Redo' ]
extraPlugins:
- justify
RTE.default {
showButtons (
bold, italic, underline,
left, center, right, justifyfull,
orderedlist, unorderedlist, indent, outdent,
line, link, removeformat,
copy, cut, paste, undo, redo
)
toolbarOrder (
bold, italic, underline, bar,
left, center, right, justifyfull,
orderedlist, unorderedlist, bar, indent, outdent, linebreak,
line, link, removeformat, bar,
copy, cut, paste, bar, undo, redo
)
}
pageTS
yaml

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”

Disable Advanced Content Filter
25
editor:
config:
allowedContent: true
YAML

Set default RTE preset
27
RTE.default.preset = my_config
PageTSconfig

Set preset in TCA
28
'content' => [
'label' => 'LLL:EXT:lang/Res...eneral.xlf:LGL.text',
'config' => [
'type' => 'text',
'cols' => 48,
'rows' => 5,
'enableRichtext' => true,
'richtextConfiguration' => 'minimal',
],
],

Using PageTS to define what specific preset to use
29
RTE {
config {
[table].[field].preset = something
[table].[field].types.[type].preset = something
}
}

RTE {
config {
tt_content {
bodytext {
preset = minimal
types {
textmedia.preset = default
my_ce.preset = full
}
}
}
}
}
Using PageTS to define preset to use
30

Plugins delivered by TYPO3
32
■ Default set provided by CKEditor
typo3/sysext/rte_ckeditor/Resources/Public/JavaScript/Contrib/plugins/
■ typo3link
■ quicktables

Using a CKEditor core plugin
33
editor:
extraPlugins:
- justify
YAML

Using external plugins
34
editor:
externalPlugins:
quicktable: { resource:
"EXT:rte_ckeditor/Resources/Public/JavaScript/Plugins/quicktable/plugin.js" }
typo3/sysext/rte_ckeditor/Configuration/RTE/Editor/Plugins.yaml

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

Our goal
37
■ A custom button in the toolbar of the RTE
■ Some magic happening when we click that button

So what do we need
38
■ Our own plugin.js
■ Tell TYPO3 to use our plugin
■ An icon for our button

example_plugin.js
39
'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

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
// 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
RTE.default.preset = plugin-example
PageTS

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

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

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

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: ' +
now.toString() + ''
);
}
});

Register the icon
52
icons: 'exampleplugin',
label: 'My button',
command: 'insertTimestamp'
});
…
}
});

next step
adding some interaction
54

Let’s use the TYPO3 modal
55
label: 'My button',
command: 'openExampleModal'
});
editor.addCommand( 'openExampleModal', {
exec: openModal
});
}
});

Let’s use the TYPO3 modal
56
…
exec: openModal
});
}
});
function openModal(editor) {
require([
'TYPO3/CMS/Backend/Modal'
], function (Modal) {
Modal.show(
'Example plugin',
'hi'
);
});
}

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

Do something with the selected text
60
require([
if (selection && selection.getSelectedText()) {
content = 'Remove: ' +
selection.getSelectedText();
Modal.confirm(
'Example plugin',
content
)
} else {
Modal.show(
'Example plugin',
content
);
}
});

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();
});

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

Open an modal with iframe
65
var url = editor.config.example_plugin.routeUrl;
require([
Modal.advanced({
type: Modal.types.iframe,
title: 'Example plugin',
content: url,
size: Modal.sizes.large
});
});
}

But I don’t want
to switch :(
66

Some things to consider
67
■ Deprecated in TYPO3 8 LTS
■ Moved to FriendsOfTYPO3/rtehtmlarea for 9
■ https://github.com/FriendsOfTYPO3/rtehtmlarea

And now?
69
■ github.com/frans-beech-it/t3ext-config_examples
■ github.com/netresearch/t3x-rte_ckeditor_image
■ typo3worx.eu/2017/02/configure-ckeditor-in-typo3/
■ docs.typo3.org/typo3cms/extensions/core/Changelog/8.6/Featur
e-79216-AddYAMLConfigurationForCKEditorRTE.html
■ docs.ckeditor.com/#!/api/CKEDITOR.config

HTMLarea to CKEditor - create presets and your own plugin for TYPO3

Recommended

Recommended

More Related Content

Similar to HTMLarea to CKEditor - create presets and your own plugin for TYPO3

Similar to HTMLarea to CKEditor - create presets and your own plugin for TYPO3 (20)

Recently uploaded

Recently uploaded (20)

HTMLarea to CKEditor - create presets and your own plugin for TYPO3