Rich Text Editor

Konfiguration

Im Page TSconfig

# default
RTE.default.preset = bootstrap
# content
RTE.config.tt_content.bodytext.preset = bootstrap

In der ext_localconf.php

/***************
 * Add default RTE configuration for rsystemplate bootstrap
 */
$GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']['bootstrap'] = 'EXT:rsystemplate_bootstrap/Configuration/RTE/Default.yaml';

In der Configuration/RTE/Default.yaml steht dann (mit CKeditor Plugins):

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:
    externalPlugins:
        rsystemplatebootstrap_address:
            resource: "EXT:rsystemplate_bootstrap/Resources/Public/CKEditor/Plugins/Address/plugin.min.js"
        rsystemplatebootstrap_box:
            resource: "EXT:rsystemplate_bootstrap/Resources/Public/CKEditor/Plugins/Box/plugin.min.js"
        rsystemplatebootstrap_columns:
            resource: "EXT:rsystemplate_bootstrap/Resources/Public/CKEditor/Plugins/Columns/plugin.min.js"
        rsystemplatebootstrap_indent:
            resource: "EXT:rsystemplate_bootstrap/Resources/Public/CKEditor/Plugins/Indent/plugin.min.js"
        rsystemplatebootstrap_table:
            resource: "EXT:rsystemplate_bootstrap/Resources/Public/CKEditor/Plugins/Table/plugin.min.js"
    config:
        contentsCss: "EXT:rsystemplate_bootstrap/Resources/Public/Css/bootstrap4-rte.min.css"
        #extraAllowedContent: "p(*);span(*)"
        stylesSet:
            - { name: "Prettyprint", element: "p", attributes: { 'class': 'prettyprint' } }
            - { name: "Highlight Block", element: "p", attributes: { 'class': 'content-highlight' } }
            - { name: "Highlight Word", element: "span", attributes: { 'class': 'content-highlight' } }
            - { name: "Lead", element: "p", attributes: { 'class': 'lead' } }
            - { name: "well-small", element: "p", attributes: { 'class': 'well-small' } }
            - { name: "Small", element: "small" }
            - { name: "Table", element: "table", attributes: { 'class': 'table' } }
            - { name: "Table Striped", element: "table", attributes: { 'class': 'table table-striped' } }
            - { name: "Table Erwin", element: "table", attributes: { 'class': 'table table-erwin' } }
            - { name: "Table Bordered", element: "table", attributes: { 'class': 'table table-bordered' } }
            - { name: "Table Condensed", element: "table", attributes: { 'class': 'table table-condensed' } }
            - { name: "Row Active", element: "tr", attributes: { 'class': 'table-active' } }
            - { name: "Row Success", element: "tr", attributes: { 'class': 'table-success' } }
            - { name: "Row Info", element: "tr", attributes: { 'class': 'table-info' } }
            - { name: "Row Warning", element: "tr", attributes: { 'class': 'table-warning' } }
            - { name: "Row Danger", element: "tr", attributes: { 'class': 'table-danger' } }
            - { name: "Cell Active", element: "td", attributes: { 'class': 'table-active' } }
            - { name: "Cell Success", element: "td", attributes: { 'class': 'table-success' } }
            - { name: "Cell Info", element: "td", attributes: { 'class': 'table-info' } }
            - { name: "Cell Warning", element: "td", attributes: { 'class': 'table-warning' } }
            - { name: "Cell Danger", element: "td", attributes: { 'class': 'table-danger' } }
            - { name: "Alert Success", element: "p", attributes: { 'class': 'alert alert-success' } }
            - { name: "Alert Info", element: "p", attributes: { 'class': 'alert alert-info' } }
            - { name: "Alert Warning", element: "p", attributes: { 'class': 'alert alert-warning' } }
            - { name: "Alert Danger", element: "p", attributes: { 'class': 'alert alert-danger' } }
            - { name: "Button Default", element: "a", attributes: { 'class': 'btn btn-default' } }
            - { name: "Button Primary", element: "a", attributes: { 'class': 'btn btn-primary' } }
            - { name: "Button Tertiary", element: "a", attributes: { 'class': 'btn btn-tertiary' } }
            - { name: "Button Quaternary", element: "a", attributes: { 'class': 'btn btn-quaternary' } }
            - { name: "Button Secondary", element: "a", attributes: { 'class': 'btn btn-secondary' } }
            - { name: "Button Success", element: "a", attributes: { 'class': 'btn btn-success' } }
            - { name: "Button Info", element: "a", attributes: { 'class': 'btn btn-info' } }
            - { name: "Button Warning", element: "a", attributes: { 'class': 'btn btn-warning' } }
            - { name: "Button Danger", element: "a", attributes: { 'class': 'btn btn-danger' } }
            - { name: "Button Outline Default", element: "a", attributes: { 'class': 'btn btn-outline-default' } }
            - { name: "Button Outline Primary", element: "a", attributes: { 'class': 'btn btn-outline-primary' } }
            - { name: "Button Outline Secondary", element: "a", attributes: { 'class': 'btn btn-outline-secondary' } }
            - { name: "Button Outline Tertiary", element: "a", attributes: { 'class': 'btn btn-outline-tertiary' } }
            - { name: "Button Outline Quaternary", element: "a", attributes: { 'class': 'btn btn-outline-quaternary' } }
            - { name: "Button Outline Success", element: "a", attributes: { 'class': 'btn btn-outline-success' } }
            - { name: "Button Outline Info", element: "a", attributes: { 'class': 'btn btn-outline-info' } }
            - { name: "Button Outline Warning", element: "a", attributes: { 'class': 'btn btn-outline-warning' } }
            - { name: "Button Outline Danger", element: "a", attributes: { 'class': 'btn btn-outline-danger' } }
            - { name: "Link Arrow", element: "a", attributes: { 'class': 'link-arrow' } }
            - { name: "Link Chevron", element: "a", attributes: { 'class': 'link-chevron' } }
            - { name: "Link Page", element: "a", attributes: { 'class': 'link-page' } }
            - { name: "Link Folder", element: "a", attributes: { 'class': 'link-folder' } }
            - { name: "Link File", element: "a", attributes: { 'class': 'link-file' } }
            - { name: "Link External", element: "a", attributes: { 'class': 'link-external' } }
            - { name: "Link Mail", element: "a", attributes: { 'class': 'link-mail' } }
            - { name: "Link Globe", element: "a", attributes: { 'class': 'link-globe' } }
            - { name: "List Unstyled", element: "ul", attributes: { 'class': 'list-unstyled' } }
            - { name: "List Inline", element: "ul", attributes: { 'class': 'list-inline' } }
            - { name: "List Check", element: "ul", attributes: { 'class': 'list-check' } }
            - { name: "List Info", element: "ul", attributes: { 'class': 'list-info' } }
            - { name: "List Warning", element: "ul", attributes: { 'class': 'list-warning' } }
            - { name: "List Ban", element: "ul", attributes: { 'class': 'list-ban' } }
            - { name: "List Chevron", element: "ul", attributes: { 'class': 'list-chevron' } }
            - { name: "Lowercased text", element: "span", attributes: { 'class': 'text-lowercase' } }
            - { name: "Uppercased text", element: "span", attributes: { 'class': 'text-uppercase' } }
            - { name: "Capitalized text", element: "span", attributes: { 'class': 'text-capitalize' } }
            - { name: "Muted", element: "span", attributes: { 'class': 'text-muted' } }
            - { name: "Primary", element: "span", attributes: { 'class': 'text-primary' } }
            - { name: "Secondary", element: "span", attributes: { 'class': 'text-secondary' } }
            - { name: "Tertiary", element: "span", attributes: { 'class': 'text-tertiary' } }
            - { name: "Quaternary", element: "span", attributes: { 'class': 'text-quaternary' } }
            - { name: "Success", element: "span", attributes: { 'class': 'text-success' } }
            - { name: "Info", element: "span", attributes: { 'class': 'text-info' } }
            - { name: "Warning", element: "span", attributes: { 'class': 'text-warning' } }
            - { name: "Danger", element: "span", attributes: { 'class': 'text-danger' } }
        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;h1;h2;h3;h4;h5;pre"
        justifyClasses:
            - text-left
            - text-center
            - text-right
            - text-justify
        extraPlugins:
            - justify
            - autolink
            - rsystemplatebootstrap_address
            - rsystemplatebootstrap_box
            - rsystemplatebootstrap_columns
            - rsystemplatebootstrap_indent
            - rsystemplatebootstrap_table
        removePlugins:
            - image
        removeButtons:
            - Anchor
            - Underline
            - Strike
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'
processing:
  allowedClasses:
    - alert
    - alert-success
    - alert-info
    - alert-warning
    - alert-danger
    - lead
    - well-small
    - small
    - table
    - table table-striped
    - table table-erwin
    - table table-bordered
    - table table-condensed
    - active
    - success
    - info
    - warning
    - danger
    - btn btn-default
    - btn btn-primary
    - btn btn-secondary
    - btn btn-success
    - btn btn-info
    - btn btn-warning
    - btn btn-danger
    - btn btn-outline-default
    - btn btn-outline-primary
    - btn btn-outline-secondary
    - btn btn-outline-success
    - btn btn-outline-info
    - btn btn-outline-warning
    - btn btn-outline-danger
    - list-unstyled
    - list-inline
    - text-lowercase
    - text-uppercase
    - text-capitalize
    - text-muted
    - text-primary
    - text-secondary
    - text-success
    - text-info
    - text-warning
    - text-danger
    - text-center
    - text-left
    - text-right
    - text-justify
    - prettyprint
    - content-highlight

Und das Parsen in der Datenbank in Typoscript:

lib.parseFunc_RTE < lib.parseFunc
lib.parseFunc_RTE {
    externalBlocks := addToList(article, address, aside, blockquote, div, dd, dl, footer)
    externalBlocks := addToList(header, nav, ol, section, table, ul, pre)
    externalBlocks {
        ol {
            stripNL = 1
            stdWrap {
                parseFunc = < lib.parseFunc
            }
        }
        ul {
            stripNL = 1
            stdWrap {
                parseFunc = < lib.parseFunc
                HTMLparser = 1
                HTMLparser {
                    tags.ul.fixAttrib.class {
                        default = list-normal
                    }
                    keepNonMatchedTags = 1
                }
            }
        }
        table {
            stripNL = 1
            stdWrap {
                 wrap = <div class="table-responsive">|</div>
            }
            HTMLtableCells = 1
            HTMLtableCells {
                default.stdWrap {
                    parseFunc = < lib.parseFunc_RTE
                    parseFunc {
                        nonTypoTagStdWrap {
                            encapsLines {
                                nonWrappedTag =
                            }
                        }
                    }
                }
            }
        }
        pre {
            stripNL = 1
            stdWrap.parseFunc < lib.parseFunc
        }
        div {
            stripNL = 1
            callRecursive = 1
        }
        address < .div
        blockquote < .div
        article < .div
        aside < .div
        footer < .div
        header < .div
        nav < .div
        section < .div
        dl < .div
        dd < .div
    }
    nonTypoTagStdWrap {
        encapsLines {
            encapsTagList = p, pre, h1, h2, h3, h4, h5, h6, hr, dt
            remapTag.DIV = P
            nonWrappedTag = P
            innerStdWrap_all.ifBlank = &nbsp;
        }
    }
    nonTypoTagStdWrap {
        HTMLparser = 1
        HTMLparser {
            keepNonMatchedTags = 1
            htmlSpecialChars = 2
        }
    }
}

 

Erstellt: 03/2023| Geändert: 03/2023