ckeditor

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

Hat Euch der Artikel weitergeholfen oder gefallen?
Ich freue mich auf einen Blick auf meine Amazon-Wunschliste. Vielen Dank!

Hat Euch der Artikel geholfen oder gefallen?
Ich freue mich auf einen Blick auf meine Amazon-Wunschliste.
Vielen Dank!


Ich bin TYPO3 Freelancer, TYPO3-Entwickler, Web-Entwickler und Frontend-Entwickler. Ich arbeite im und für das Web seit 2004.
Mehr Infos zu der TYPO3 Internet-Agentur INGENIUMDESIGN.

Besucht auch unser TYPO3 Hilfe Forum.

Leave a Reply

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

2 Kommentare

  1. Andreas

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

  2. Christian Platt

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

Next ArticleTYPO3 BE - Error PHP Warning: Undefined array key "tx_news_pi1"