CKEditor

Deaktivieren

Seiten-TSconfig zum deaktivieren der t3sbootstrap-Konfiguration:

RTE.default.preset = default || minimal || full

Fontawesome

EXT:rte_ckeditor_fontawesome installieren und aktivieren.

Das "statische Template" der EXT:rte_ckeditor_fontawesome darf/sollte nicht eingebunden werden!

Custom CKEditor

Du kannst den CKEditor individuell anpassen. Ein Blick in die EXT:t3sb_package (ab v1.0.1) kann hier weiterhelfen (ext_localconf.php & MyCustomPreset.yaml).
Hier z.B. die Datei MyCustomPreset.yaml mit Tabellen, CodeBlock u.a.:

# Load default processing options
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:rte_ckeditor_fontawesome/Configuration/RTE/PluginFA6.yaml" }
#    - { resource: "EXT:rte_ckeditor_image/Configuration/RTE/Plugin.yaml" }
# Add configuration for the editor
# For complete documentation see
# docs.typo3.org/c/typo3/cms-rte-ckeditor/main/en-us/Configuration/QuickStart.html
# ckeditor.com/docs/ckeditor5/latest/features/index.html
editor:
  config:
    importModules:
      - { 'module': '@ckeditor/ckeditor5-font', 'exports': [ 'Font' ] }
      - { 'module': '@ckeditor/ckeditor5-code-block', 'exports': [ 'CodeBlock' ] }
      - { 'module': '@ckeditor/ckeditor5-indent', 'exports': [ 'IndentBlock' ] }
      - { 'module': '@ckeditor/ckeditor5-show-blocks', 'exports': ['ShowBlocks'] }
      - { 'module': '@ckeditor/ckeditor5-word-count', 'exports': ['WordCount'] }
      - { 'module': '@ckeditor/ckeditor5-list', 'exports': ['TodoList'] }
#    removePlugins: null
#    externalPlugins:
#      typo3image:
#        allowedExtensions: "jpg,jpeg,png"
    extraPlugins:
      - Font
      - Code
      - CodeBlock
      - Indent
      - IndentBlock
      - TodoList
    contentsCss:
      - 'EXT:t3sbootstrap/Resources/Public/Backend/RTE/t3sbootstrap.css?v=1'
    toolbar:
      items:
        - selectAll
        - '|'
        - undo
        - redo
        - '|'
        - bold
        - italic
        - subscript
        - superscript
        - softhyphen
        - '|'
        - bulletedList
        - numberedList
        - todoList
        - blockQuote
        - '|'
        - link
        - '|'
        - removeFormat
        - undo
        - redo
        - '|'
        - horizontalLine
        - showBlocks
        - sourceEditing
        - '-'
        - style
        - '|'
        - heading
        - '|'
        - { label: 'Font', icon: false, items: [ 'fontFamily', 'fontSize', 'fontColor', 'fontBackgroundColor' ] }
        - '|'
        - alignment
        - findAndReplace
        - insertTable
        - specialCharacters
        - '|'
        - code
        - codeBlock
        - '|'
        - outdent
        - indent
#        - insertImage
    indentBlock:
      classes:
        - 'custom-block-indent-a'
        - 'custom-block-indent-b'
        - 'custom-block-indent-c'
    fontColor:
      colors:
        - { label: 'Primary', color: 'var(--bs-primary)' }
        - { label: 'Secondary', color: 'var(--bs-secondary)' }
        - { label: 'Success', color: 'var(--bs-success)' }
        - { label: 'Danger', color: 'var(--bs-danger)' }
        - { label: 'Warning', color: 'var(--bs-warning)' }
        - { label: 'Info', color: 'var(--bs-info)' }
        - { label: 'Light', color: 'var(--bs-light)' }
        - { label: 'Dark', color: 'var(--bs-dark)' }
      fontBackgroundColor:
        colors:
        - { label: 'Primary', color: 'var(--bs-primary)' }
        - { label: 'Secondary', color: 'var(--bs-secondary)' }
        - { label: 'Success', color: 'var(--bs-success)' }
        - { label: 'Danger', color: 'var(--bs-danger)' }
        - { label: 'Warning', color: 'var(--bs-warning)' }
        - { label: 'Info', color: 'var(--bs-info)' }
        - { label: 'Light', color: 'var(--bs-light)' }
        - { label: 'Dark', color: 'var(--bs-dark)' }
    codeBlock:
      languages:
        - { language: 'plaintext', label: 'Plain text' }
        - { language: 'php', label: 'PHP' }
        - { language: 'sql', label: 'SQL' }
        - { language: 'yaml', label: 'YAML' }
        - { language: 'json', label: 'JSON' }
        - { language: 'css', label: 'CSS' }
        - { language: 'scss', label: 'SCSS' }
        - { language: 'javascript', label: 'JavaScript' }
        - { language: 'typescript', label: 'TypeScript' }
        - { language: 'shell', label: 'Shell' }
        - { language: 'xml', label: 'XML' }
        - { language: 'nginx', label: 'Nginx' }
        - { language: 'bash', label: 'Bash' }
    heading:
      options:
        - { model: 'paragraph', view: 'p', title: 'Paragraph' }
        - { model: 'heading2', view: 'h2', title: 'Heading 2' }
        - { model: 'heading3', view: 'h3', title: 'Heading 3' }
        - { model: 'heading4', view: 'h4', title: 'Heading 4' }
        - { model: 'heading5', view: 'h5', title: 'Heading 5' }
        - { model: 'heading6', view: 'h6', title: 'Heading 6' }
        - { model: 'formatted', view: 'pre', title: 'Pre-Formatted Text' }
    style:
      definitions:
        # Blockstile
        - { name: 'Lead', element: 'p', classes: ['lead'], isBlock: 'true' }
        - { name: 'Small ', element: 'p', classes: ['small'], isBlock: 'true' }
        - { name: 'Color primary ', element: 'p', classes: ['text-primary'], isBlock: 'true' }
        - { name: 'Color secondary ', element: 'p', classes: ['text-secondary'], isBlock: 'true' }
        - { name: 'Color success ', element: 'p', classes: ['text-success'], isBlock: 'true' }
        - { name: 'Color info ', element: 'p', classes: ['text-info'], isBlock: 'true' }
        - { name: 'Color danger ', element: 'p', classes: ['text-danger'], isBlock: 'true' }
        - { name: 'Color warning ', element: 'p', classes: ['text-warning'], isBlock: 'true' }
        - { name: 'Lowercase', element: 'p', 'classes': ['text-lowercase'], isBlock: 'true' }
        - { name: 'Uppercase', element: 'p', 'classes': ['text-uppercase'], isBlock: 'true' }
        - { name: 'Capitalize', element: 'p', 'classes': ['text-capitalize'], isBlock: 'true' }
        - { name: 'Alert Primary', element: 'p', 'classes': ['alert', 'alert-primary'], isBlock: 'true' }
        - { name: 'Alert Secondary', element: 'p', classes': ['alert', 'alert-secondary'], isBlock: 'true' }
        - { name: 'Alert Success', element: 'p', 'classes': ['alert', 'alert-success'], isBlock: 'true' }
        - { name: 'Alert Danger', element: 'p', 'classes': ['alert', 'alert-danger'], isBlock: 'true' }
        - { name: 'Alert Warning', element: 'p', 'classes': ['alert', 'alert-warning'], isBlock: 'true' }
        - { name: 'Alert Info', element: 'p', 'classes': ['alert', 'alert-info'], isBlock: 'true' }
        - { name: 'Alert Light', element: 'p', 'classes': ['alert', 'alert-light'], isBlock: 'true' }
        - { name: 'Alert Dark', element: 'p', 'classes': ['alert', 'alert-dark'], isBlock: 'true' }
#        - { name: 'Alert Primary', element: 'div', 'classes': ['alert', 'alert-primary'], isBlock: 'true' }
#        - { name: 'Alert Secondary', element: 'div', classes': ['alert', 'alert-secondary'], isBlock: 'true' }
#        - { name: 'Alert Success', element: 'div', 'classes': ['alert', 'alert-success'], isBlock: 'true' }
#        - { name: 'Alert Danger', element: 'div', 'classes': ['alert', 'alert-danger'], isBlock: 'true' }
#        - { name: 'Alert Warning', element: 'div', 'classes': ['alert', 'alert-warning'], isBlock: 'true' }
#        - { name: 'Alert Info', element: 'div', 'classes': ['alert', 'alert-info'], isBlock: 'true' }
#        - { name: 'Alert Light', element: 'div', 'classes': ['alert', 'alert-light'], isBlock: 'true' }
#        - { name: 'Alert Dark', element: 'div', 'classes': ['alert', 'alert-dark'], isBlock: 'true' }
        # Textstile
        - { name: 'Mark', element: 'span', classes: ['mark'] }
        - { name: 'Del', element: 'del', classes: ['del'] }
        - { name: 'Ins', element: 'ins', classes: ['ins'] }
        - { name: 'Code', element: 'code', classes: [''] }
        - { name: 'Lead', element: 'span', classes: ['lead'] }
        - { name: 'Small', element: 'span', classes: ['small'] }
        - { name: 'Color primary', element: 'span', classes: ['text-primary']  }
        - { name: 'Color secondary', element: 'span', classes: ['text-secondary']  }
        - { name: 'Color success', element: 'span', classes: ['text-success']  }
        - { name: 'Color info', element: 'span', classes: ['text-info']  }
        - { name: 'Color danger', element: 'span', classes: ['text-danger']  }
        - { name: 'Color warning', element: 'span', classes: ['text-warning']  }
        - { name: 'Lowercase ', element: 'span', 'classes': ['text-lowercase'] }
        - { name: 'Uppercase ', element: 'span', 'classes': ['text-uppercase'] }
        - { name: 'Capitalize ', element: 'span', 'classes': ['text-capitalize'] }
        # Textstile - Buttons
        - { name: 'Button Primary', element: 'a', 'classes': ['btn btn-primary'] }
        - { name: 'Button Secondary', element: 'a', 'classes': ['btn btn-secondary'] }
        - { name: 'Button Success', element: 'a', 'classes': ['btn btn-success'] }
        - { name: 'Button Danger', element: 'a', 'classes': ['btn btn-danger'] }
        - { name: 'Button Warning', element: 'a', 'classes': ['btn btn-warning'] }
        - { name: 'Button Info', element: 'a', 'classes': ['btn btn-info'] }
        - { name: 'Button Light', element: 'a', 'classes': ['btn btn-light'] }
        - { name: 'Button Dark', element: 'a', 'classes': ['btn btn-dark'] }
        # Textstile - Badges
        - { name: 'Badge Primary', element: 'span', 'classes': ['badge', 'text-bg-primary'] }
        - { name: 'Badge Secondary', element: 'span', 'classes': ['badge text-bg-secondary'] }
        - { name: 'Badge Success', element: 'span', 'classes': ['badge text-bg-success'] }
        - { name: 'Badge Danger', element: 'span', 'classes': ['badge text-bg-danger'] }
        - { name: 'Badge Warning', element: 'span', 'classes': ['badge text-bg-warning'] }
        - { name: 'Badge Info', element: 'span', 'classes': ['badge text-bg-info'] }
        - { name: 'Badge Light', element: 'span', 'classes': ['badge text-bg-light'] }
        - { name: 'Badge Dark', element: 'span', 'classes': ['badge text-bg-dark'] }
        # Textstile - Pill badges
        - { name: 'Pill Badge Primary', element: 'span', 'classes': ['badge rounded-pill text-bg-primary'] }
        - { name: 'Pill Badge Secondary', element: 'span', 'classes': ['badge rounded-pill text-bg-secondary'] }
        - { name: 'Pill Badge Success', element: 'span', 'classes': ['badge rounded-pill text-bg-success'] }
        - { name: 'Pill Badge Danger', element: 'span', 'classes': ['badge rounded-pill text-bg-danger'] }
        - { name: 'Pill Badge Warning', element: 'span', 'classes': ['badge rounded-pill text-bg-warning'] }
        - { name: 'Pill Badge Info', element: 'span', 'classes': ['badge rounded-pill text-bg-info'] }
        - { name: 'Pill Badge Light', element: 'span', 'classes': ['badge rounded-pill text-bg-light'] }
        - { name: 'Pill Badge Dark', element: 'span', 'classes': ['badge rounded-pill text-bg-dark'] }
    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
    htmlSupport:
        allowEmpty:
          - 'div'
        allow:
          - name: 'div'
            attributes: true
            classes: true
            styles: true