Im ckeditor möchte ich gerne dem Redakteur die Möglichkeit geben Tabellen einzufügen und mit Bootstrap Klassen zu versehen. Also table table-striped zum Beispiel. Ich habe bisher meine eigene RTE Konfiguration erstellt. Diese wird auch von Typo3 geladen.
Zum Testen habe ich unter style->definitions "- { name: "Striped", element: "table", class: ["table-striped"] }" eingefügt. Das kann ich aber für Tabellen scheinbar nicht nutzen, da dies wohl nur auf Blockelemente zielt?
Wie kann ich denn Bootstrap Klassen verwenden und das Typo3 die Klassen "contenttable" nicht mehr verwendet?
Meine Konfiguration soweit:
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:
config:
toolbar:
items:
- style
- heading
# grouping separator
- "|"
- bold
- italic
- subscript
- superscript
- softhyphen
- "|"
- bulletedList
- numberedList
- blockQuote
- alignment
- "|"
- findAndReplace
- link
- "|"
- removeFormat
- undo
- redo
- "|"
- insertTable
- "|"
#- specialCharacters
- horizontalLine
- sourceEditing
heading:
options:
- { model: "paragraph", title: "Paragraph" }
- { model: "heading2", view: "h2", title: "Heading 2" }
- { model: "heading3", view: "h3", title: "Heading 3" }
- { model: "formatted", view: "pre", title: "Pre-Formatted Text" }
style:
definitions:
- { name: "Lead", element: "p", classes: ["lead"] }
- { name: "Small", element: "small" }
- { name: "Muted", element: "span", classes: ["text-muted"] }
- { name: "Striped", element: "table", class: ["table-striped"] }
alignment:
options:
- { name: "left", className: "text-start" }
- { name: "center", className: "text-center" }
- { name: "right", className: "text-end" }
- { name: "justify", className: "text-justify" }
table:
defaultHeadings: { rows: 1 }
contentToolbar:
- tableColumn
- tableRow
- mergeTableCells
- tableProperties
- tableCellProperties
- toggleTableCaption
htmlSupport:
allow:
- {
name: "table",
classes:
["table", "table-striped", "table-bordered", "table-hover"],
}