TYPO3 – ckeditor – table – table-responsive
Hier möchte ich Euch in einer kleinen Anleitung zeigen, wie ihr im ckeditor von bootstrap die table-responsive verwenden könnt.
Von der normalen Ausgabe: <table class=“table“>… wollen wir noch zusätzlich einen <div class=“table-responsive“>…
<table class="table">
...
</table>
Die neue Ausgabe soll dann so aussehen:
<div class="table-responsive">
<table class="table">
...
</table>
</div>
Dafür müssen wir die lib.parseFunc_RTE erweitern: ins SETUP kommt folgendes typoscript:
lib.parseFunc_RTE {
externalBlocks {
table {
stdWrap {
wrap = <div class="table-responsive">|</div>
HTMLparser {
tags {
table {
fixAttrib {
class {
default = table
always = 1
list = table, table-bordered, table-striped, table-hover, table-sm
}
}
}
}
}
}
}
}
}
und Ihr könnt anhand dieses Beispiel Eure ckeditor YAML aufbauen:
(wie ihr Eure eigenen ckeditor YAML Datei verwendet, könnt ihr hier nachlesen.)
# Load default processing options
#
imports:
#- { resource: "EXT:rte_ckeditor/Configuration/RTE/Default.yaml" }
- { 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" }
# Add configuration for the editor
# For complete documentation see http://docs.ckeditor.com/#!/api/CKEDITOR.config
editor:
externalPlugins:
#table_responsive: { resource: "EXT:XXX/Resources/Public/RTE/Plugins/Table.js" }
config:
contentsCss: "EXT:XXX/Resources/Public/Css/rte.css"
defaultContentLanguage: "de"
allowedContent: true
pasteFromWordPromptCleanup: true
stylesSet:
- { name: "List None", element: "ul", attributes: { 'class': 'none' } }
- { name: "List Disc", element: "ul", attributes: { 'class': 'disc' } }
- { name: "List Square", element: "ul", attributes: { 'class': 'square' } }
- { name: "Table", element: "table", attributes: { 'class': 'table' } }
- { name: "Table Hover", element: "table", attributes: { 'class': 'table table-hover' } }
- { name: "Table Striped", element: "table", attributes: { 'class': 'table table-striped' } }
- { name: "Button Text", element: "a", attributes: { 'class': 'txt-btn' } }
- { name: "Button Default", element: "a", attributes: { 'class': 'btn btn-default' } }
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;h2;h3;h4;h5;h6"
justifyClasses:
- text-start
- text-center
- text-end
extraPlugins:
- justify
- table_responsive
- table_wrap
removePlugins:
- image
removeButtons:
- Anchor
- Underline
- Strike
- Blockquote
- Undo
- Redo
- Scayt
- HorizontalRule
- JustifyBlock
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'
Wichtig sind hier die Tabellen class für den ckeditor:
- { name: "Table", element: "table", attributes: { 'class': 'table' } }
- { name: "Table Hover", element: "table", attributes: { 'class': 'table table-hover' } }
- { name: "Table Striped", element: "table", attributes: { 'class': 'table table-striped' } }
Eure Meinung zu dem Artikel ist gefragt! Schreibt mir ein Kommentar
Ich freue mich auf einen Blick auf meine Amazon-Wunschliste. Vielen Dank!
Andreas
Vielen Dank für die Anleitung, sehr hilfreich für mich 🙂
Christian Platt
Sehr guter Artikel, der an Hand von Beispielen alltägliche Probleme löst.