Hallo zusammen,
fast schon passend zum Thema Vor- und Nachteile des Bootstrap-Packages von heute Morgen laufe ich gerade auch gegen ein hausgemachtes Problem und finde keine Lösung:
Ich habe eine frische Installation mit dem Sitpackage-Builder und dem Bootstrap-Package und möchte die Code-Block-Extension des CKEditors V5 nutzen.
Die originale YAML
-Datei (/Configuration/RTE/Default.yaml
) sieht so aus:
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" }
- { resource: "EXT:bootstrap_package/Configuration/RTE/Default.yaml" }
editor:
config:
contentsCss: "EXT:bootstrap_package/Resources/Public/Css/bootstrap4-rte.min.css"
Ich habe den Bereich contentsCss
herausgelöscht, die diese ohnehin falsch ist und der Import schon in der eingebundenen Default.yaml
des Bootstrack-Packages erledigt wird, und die Extension nun so eingebunden:
editor:
config:
importModules:
- { module: '@ckeditor/ckeditor5-code-block', exports: ['CodeBlock'] }
htmlSupport:
allow:
- { name. 'kbd', attributes: true, classes: true, styles: true }
- { name. 'pre', attributes: true, classes: true, styles: true }
- { name. 'code', attributes: true, classes: true, styles: true }
toolbar:
items:
- codeBlock
codeBlock:
languages:
- { language: 'html', label: 'HTML' }
- { language: 'css', label: 'CSS' }
- { language: 'yaml', label: 'YAML' }
- { language: 'javascript', label: 'JavaScript' }
- { language: 'json', label: 'JSON' }
- { language: 'php', label: 'PHP' }
- { language: 'sql', label: 'SQL' }
- { language: 'treeview', label: 'TreeView' }
- { language: 'tsconfig', label: 'TsConfig' }
- { language: 'typoscript', label: 'TypoScript' }
Eigentlich (!) sollte das so funktionieren, tut es aber nicht. Die Toolbar des Bootstrap-Packages bleibt unverändert.

Erst dann, wenn ich den Import der Bootstrap-Package-YAML-Datei entferne oder auskommentiere, wird die CodeBlock-Extension korrekt angezeigt und verarbeitet. Hier nutze ich das Preset Full statt der Default.YAML:

Warum blockiert die YAML-Datei des Bootstrap-Packages die Nutzung des Plug-ins?
Das hier ist – der Vollständigkeit halber – die Default.yaml
aus dem Bootstrap-Package:
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:
bootstrappackage_address:
resource: "EXT:bootstrap_package/Resources/Public/CKEditor/Plugins/Address/plugin.min.js"
bootstrappackage_box:
resource: "EXT:bootstrap_package/Resources/Public/CKEditor/Plugins/Box/plugin.min.js"
bootstrappackage_columns:
resource: "EXT:bootstrap_package/Resources/Public/CKEditor/Plugins/Columns/plugin.min.js"
bootstrappackage_indent:
resource: "EXT:bootstrap_package/Resources/Public/CKEditor/Plugins/Indent/plugin.min.js"
bootstrappackage_table:
resource: "EXT:bootstrap_package/Resources/Public/CKEditor/Plugins/Table/plugin.min.js"
config:
contentsCss: "EXT:bootstrap_package/Resources/Public/Css/bootstrap5-rte.min.css"
stylesSet:
- { name: "Lead", element: "p", attributes: { 'class': 'lead' } }
- { name: "Small", element: "small" }
- { name: "Table", element: "table", attributes: { 'class': 'table' } }
- { name: "Table Striped", element: "table", attributes: { 'class': 'table table-striped' } }
- { name: "Table Bordered", element: "table", attributes: { 'class': 'table table-bordered' } }
- { name: "Table Condensed", element: "table", attributes: { 'class': 'table table-condensed' } }
- { name: "Row Active", element: "tr", attributes: { 'class': 'table-active' } }
- { name: "Row Success", element: "tr", attributes: { 'class': 'table-success' } }
- { name: "Row Info", element: "tr", attributes: { 'class': 'table-info' } }
- { name: "Row Warning", element: "tr", attributes: { 'class': 'table-warning' } }
- { name: "Row Danger", element: "tr", attributes: { 'class': 'table-danger' } }
- { name: "Cell Active", element: "td", attributes: { 'class': 'table-active' } }
- { name: "Cell Success", element: "td", attributes: { 'class': 'table-success' } }
- { name: "Cell Info", element: "td", attributes: { 'class': 'table-info' } }
- { name: "Cell Warning", element: "td", attributes: { 'class': 'table-warning' } }
- { name: "Cell Danger", element: "td", attributes: { 'class': 'table-danger' } }
- { name: "Button Default", element: "a", attributes: { 'class': 'btn btn-default' } }
- { name: "Button Primary", element: "a", attributes: { 'class': 'btn btn-primary' } }
- { name: "Button Secondary", element: "a", attributes: { 'class': 'btn btn-secondary' } }
- { name: "Button Tertiary", element: "a", attributes: { 'class': 'btn btn-tertiary' } }
- { name: "Button Quaternary", element: "a", attributes: { 'class': 'btn btn-quaternary' } }
- { name: "Button Success", element: "a", attributes: { 'class': 'btn btn-success' } }
- { name: "Button Info", element: "a", attributes: { 'class': 'btn btn-info' } }
- { name: "Button Warning", element: "a", attributes: { 'class': 'btn btn-warning' } }
- { name: "Button Danger", element: "a", attributes: { 'class': 'btn btn-danger' } }
- { name: "Button Outline Default", element: "a", attributes: { 'class': 'btn btn-outline-default' } }
- { name: "Button Outline Primary", element: "a", attributes: { 'class': 'btn btn-outline-primary' } }
- { name: "Button Outline Secondary", element: "a", attributes: { 'class': 'btn btn-outline-secondary' } }
- { name: "Button Outline Tertiary", element: "a", attributes: { 'class': 'btn btn-outline-tertiary' } }
- { name: "Button Outline Quaternary", element: "a", attributes: { 'class': 'btn btn-outline-quaternary' } }
- { name: "Button Outline Success", element: "a", attributes: { 'class': 'btn btn-outline-success' } }
- { name: "Button Outline Info", element: "a", attributes: { 'class': 'btn btn-outline-info' } }
- { name: "Button Outline Warning", element: "a", attributes: { 'class': 'btn btn-outline-warning' } }
- { name: "Button Outline Danger", element: "a", attributes: { 'class': 'btn btn-outline-danger' } }
- { name: "Link Arrow", element: "a", attributes: { 'class': 'link-arrow' } }
- { name: "Link Chevron", element: "a", attributes: { 'class': 'link-chevron' } }
- { name: "Link Page", element: "a", attributes: { 'class': 'link-page' } }
- { name: "Link Folder", element: "a", attributes: { 'class': 'link-folder' } }
- { name: "Link File", element: "a", attributes: { 'class': 'link-file' } }
- { name: "Link External", element: "a", attributes: { 'class': 'link-external' } }
- { name: "Link Mail", element: "a", attributes: { 'class': 'link-mail' } }
- { name: "Link Globe", element: "a", attributes: { 'class': 'link-globe' } }
- { name: "List Unstyled", element: "ul", attributes: { 'class': 'list-unstyled' } }
- { name: "List Inline", element: "ul", attributes: { 'class': 'list-inline' } }
- { name: "List Check", element: "ul", attributes: { 'class': 'list-check' } }
- { name: "List Info", element: "ul", attributes: { 'class': 'list-info' } }
- { name: "List Warning", element: "ul", attributes: { 'class': 'list-warning' } }
- { name: "List Ban", element: "ul", attributes: { 'class': 'list-ban' } }
- { name: "List Chevron", element: "ul", attributes: { 'class': 'list-chevron' } }
- { name: "Lowercased text", element: "span", attributes: { 'class': 'text-lowercase' } }
- { name: "Uppercased text", element: "span", attributes: { 'class': 'text-uppercase' } }
- { name: "Capitalized text", element: "span", attributes: { 'class': 'text-capitalize' } }
- { name: "Muted", element: "span", attributes: { 'class': 'text-muted' } }
- { name: "Primary", element: "span", attributes: { 'class': 'text-primary' } }
- { name: "Secondary", element: "span", attributes: { 'class': 'text-secondary' } }
- { name: "Tertiary", element: "span", attributes: { 'class': 'text-tertiary' } }
- { name: "Quaternary", element: "span", attributes: { 'class': 'text-quaternary' } }
- { name: "Success", element: "span", attributes: { 'class': 'text-success' } }
- { name: "Info", element: "span", attributes: { 'class': 'text-info' } }
- { name: "Warning", element: "span", attributes: { 'class': 'text-warning' } }
- { name: "Danger", element: "span", attributes: { 'class': 'text-danger' } }
toolbarGroups:
- { name: styles, groups: [ format, styles ] }
- { name: basicstyles, groups: [ basicstyles ] }
- { name: paragraph, groups: [ list, indent, blocks, align ] }
- "/"
- { name: links, groups: [ links ] }
- { name: clipboard, groups: [ clipboard, cleanup, undo ] }
- { name: editing, groups: [ spellchecker ] }
- { name: insert, groups: [ insert ] }
- { name: tools, groups: [ table, specialchar ] }
- { name: document, groups: [ mode ] }
format_tags: "p;h1;h2;h3;h4;h5;pre"
justifyClasses:
- text-left
- text-center
- text-right
- text-justify
extraPlugins:
- justify
- autolink
- bootstrappackage_address
- bootstrappackage_box
- bootstrappackage_columns
- bootstrappackage_indent
- bootstrappackage_table
removePlugins:
- image
removeButtons:
- Anchor
- Underline
- Strike
classesAnchor:
page:
class: 'link-page'
type: 'page'
folder:
class: 'link-folder'
type: 'folder'
file:
class: 'link-file'
type: 'file'
external:
class: 'link-external'
type: 'url'
mail:
class: 'link-mail'
type: 'mail'
buttons:
link:
properties:
class:
allowedClasses: 'link-arrow, link-page, link-folder, link-file, link-external, link-mail'