Hi, mir gelingt es einfach nicht, ein eigenes Plugin im CKEditor einzubauen.
TYPO3 12.4.26
Ich habe folgendes:
Resources/Public/CKEditor/Plugins/My/myplugin.js
Resources/Public/CKEditor/Plugins/My/icons/myplugin.png
Die myplugin.js sieht so aus:
'use strict';
(function() {
console.log('CKEditor Plugin wird geladen...');
CKEDITOR.plugins.add('myplugin', {
icons: 'myplugin',
init: function (editor) {
console.log('myplugin wurde in CKEditor initialisiert');
editor.addCommand('insertMyText', {
exec: function (editor) {
editor.insertHtml('<strong>Mein eigener Text</strong>');
}
});
editor.ui.addButton('myplugin', {
label: 'Mein Plugin-Button',
command: 'insertMyText',
toolbar: 'insert'
});
console.log('myplugin Button wurde hinzugefügt.');
}
});
})();
In der YAML für den RTE habe ich dann folgendes stehen:
imports:
- { resource: "EXT:rte_ckeditor/Configuration/RTE/Processing.yaml" }
- { resource: "EXT:rte_ckeditor/Configuration/RTE/Editor/Base.yaml" }
- { resource: "EXT:rte_ckeditor/Configuration/RTE/Editor/Plugins.yaml" }
editor:
externalPlugins:
myplugin:
resource: EXT:nameextension/Resources/Public/CKEditor/Plugins/My/myplugin.js
config:
contentsCss: "EXT:nameextension/Resources/Public/Css/rte.css"
stylesSet:
- { name: "Lead", element: "p", attributes: { 'class': 'lead' } }
- { name: "Primärfarbe", element: "span", attributes: { 'class': 'text-primary' } }
- { name: "Sekundärfarbe", element: "span", attributes: { 'class': 'text-secondary' } }
toolbar:
items:
- Styles
- bold
- italic
- numberedList
- bulletedList
- link
- specialCharacters
- softhyphen
- superscript
- showBlocks
- sourceEditing
- alignment
- myplugin
format_tags: "p;h1;h2;h3;h4;h5;pre"
alignment:
options:
- { name: 'left', className: 'text-start' }
- { name: 'center', className: 'text-center' }
- { name: 'right', className: 'text-end' }
- { name: 'justify', className: 'text-justify' }
importModules:
- { module: '@ckeditor/ckeditor5-show-blocks', exports: ['ShowBlocks'] }
Der RTE wird mir dann passend mit den Items aus der definierten Toolbar angezeigt. Nur mein Plugin fehlt.
In der Console bekomme ich den Fehler:
VM22160 ckeditor5-utils.js:54 toolbarview-item-unavailable
Object
item: "myplugin"
und die Angaben aus dem console.log werden nicht ausgeführt.
Nach den Änderungen habe ich "Bilder und Dateien im Browser-Cache" gelöscht (Chrome) und im TYPO3 Backend mit dem Blitz alle Caches geleert.
Was habe ich übersehen, wo kann der Fehler liegen? Offensichtlich findet er ja die JS-Datei nicht. Der Pfad ist aber korrekt.
Viele Grüße, Lars