tinyMCE - abbr-Tag einfügen
von Ronald Boda
Gab es früher nicht auch eine <abbr> Schaltfläche im tinyMCE?
Wer viel mit Abkürzungen zu tun hat, kennt das Problem. Ob Bgm. oder Stv. - Abkürzungen sind häufiger als man denkt. Und bei jeder Abkürzung muss man in die Quellcode-Ansicht wechseln, um dort händisch das <abbr>-Tag einzufügen.
Wer sich fragt, was <abbr>-Tags sind und wozu man diese nutzen kann, liest sich am Besten die entsprechende Passage in den WCAG-Richtlinien für barrierefreie Webseiten hier durch.
Für mich stellte sich rasch die Frage, wie man die Schaltfläche in den tinyMCE Editor bekommt. Und so geht`s:
Erstellte dir - sofern noch keine vorhanden ist - im Verzeichnis /templates/ eine Datei be_tinyMCE.html5 an. In dieser Datei fügst du folgenden Inhalt ein:
// templates/be_tinyMCE.html5
<?php $this->extend('be_tinyMCE'); ?>
<?php $this->block('toolbar'); ?>
toolbar: 'link unlink | image | styles | abbr | bold italic | bullist numlist outdent indent | undo redo | code',
<?php $this->endblock(); ?>
<?php $this->block('custom'); ?>
visualblocks_default_state: false,
setup: function(editor) {
editor.getElement().removeAttribute('required');
document.querySelectorAll('[accesskey]').forEach(function(el) {
editor.addShortcut('access+' + el.accessKey, el.id, () => el.click());
});
// Eigener Abbr-Button
editor.ui.registry.addButton('abbr', {
text: 'Abk.',
tooltip: 'Abkürzung einfügen',
onAction: function () {
const selection = editor.selection.getContent({ format: 'text' });
editor.windowManager.open({
title: 'Abkürzung einfügen',
body: {
type: 'panel',
items: [
{ type: 'input', name: 'abbr', label: 'Abkürzung' },
{ type: 'input', name: 'title', label: 'Bedeutung (title-Attribut)' }
]
},
initialData: {
abbr: selection || ''
},
buttons: [
{ type: 'cancel', text: 'Abbrechen' },
{ type: 'submit', text: 'Einfügen', primary: true }
],
onSubmit: function (api) {
const data = api.getData();
const abbr = editor.dom.encode(selection || data.abbr);
const title = editor.dom.encode(data.title);
editor.insertContent('<abbr title="' + title + '">' + abbr + '</abbr>');
api.close();
}
});
}
});
},
<?php $this->endblock(); ?>
Im Block <?php $this->block('toolbar'); ?> fügst Du die Schaltfläche "Abbr" in die Toolbox ein. Deren Funktionalität wird dann im Block <?php $this->block('custom'); ?> definiert.
editor.windowManager.open({ ... öffnet das Fenster dessen Titel Du frei wählen kannst.
Der folgende body-Teil definiert die notwendigen Eingabefelder (in diesem Fall 'abbr' und 'title')
Der Block initialData: { ... } sorgt dafür, dass eine bereits markierte Abkürzung (z.B. MBA) direkt in das Feld 'abbr' eingefügt wird (Danke Bernhard!).
Der Block buttons sorgt für die Schaltflächen 'Abbrechen' bzw. 'Einfügen'.
Und letztlich folgt der Block onSubmit, welcher für das Einfügen in den Quellcode zuständig ist.
Kommentare
Einen Kommentar schreiben