---
title: "TYPO3 – ckeditor – table – table-responsive"
url: "https://www.typo3.net/d/900699-typo3-ckeditor-table-table-responsive"
source: "typo3.net"
tags: ["Artikel","Tipp"]
created: "2022-03-06"
last_reply: "2022-03-07"
replies: 2
solved: false
page: 1
pages: 1
lang: "de"
---

# TYPO3 – ckeditor – table – table-responsive

Artikel · 2 Antworten · gestartet 2022-03-06

## Eröffnungsbeitrag

**Sebastian Schmal** · 2022-03-06 · [Beitrag #1](https://www.typo3.net/d/900699-typo3-ckeditor-table-table-responsive/1)

[Bild: ckeditor](https://www.typo3.net/assets/files/typo3-probleme/2022/03/Bildschirmfoto-2022-03-06-um-08.50.32.png)

Hier möchte ich Euch in einer kleinen Anleitung zeigen, wie ihr im ckeditor von [bootstrap die table-responsive](https://getbootstrap.com/docs/5.0/content/tables/#responsive-tables) verwenden könnt.

Von der normalen Ausgabe: <table class=“table“>… wollen wir noch zusätzlich einen <div class=“table-responsive“>…

```html
<table class="table">
   ...
</table>
```

Die **neue Ausgabe** soll dann so aussehen:

```html
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>
```

Dafür müssen wir die lib.parseFunc_RTE erweitern: ins SETUP kommt folgendes typoscript:

```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.](https://www.typo3.net/d/900672-typo3-ckeditor-ohne-eigene-extension-bearbeiten))

```yaml
# 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:

```plaintext
- { 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' } }
```

*Ursprünglich erschienen am 06.03.2022 auf typo3-probleme.de.*

## Antworten

### [#2](https://www.typo3.net/d/900699-typo3-ckeditor-table-table-responsive/2) · Unbekannter Benutzer · 2022-03-06

*Ein Leser schrieb:*

Sehr guter Artikel, der an Hand von Beispielen alltägliche Probleme löst.

### [#3](https://www.typo3.net/d/900699-typo3-ckeditor-table-table-responsive/3) · Unbekannter Benutzer · 2022-03-07

*Ein Leser schrieb:*

Vielen Dank für die Anleitung, sehr hilfreich für mich 🙂

---

Quelle: „TYPO3 – ckeditor – table – table-responsive“, typo3.net, https://www.typo3.net/d/900699-typo3-ckeditor-table-table-responsive
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.