netresearch / t3x-rte_ckeditor_image

Image support in CKEditor for the TYPO3 ecosystem
GNU Affero General Public License v3.0
56 stars 65 forks source link

Typo3 v12.4 / PHP 8.2 - Extension not working #273

Closed Denneee closed 8 months ago

Denneee commented 9 months ago

Bug description I did everything the instructions said, but the picture button in the text editor isn't appearing.

Steps to reproduce

  1. Install the extension via composer
  2. Add a preset for rte_ckeditor in custom Default.yaml
  3. Include extension Static Template file

Screenshots or logs My Default.yaml looks like this:


imports:
    - { resource: "EXT:rte_ckeditor/Configuration/RTE/Processing.yaml" }
    - { resource: "EXT:rte_ckeditor/Configuration/RTE/Editor/Plugins.yaml" }
    - { resource: "EXT:rte_ckeditor_image/Configuration/RTE/Plugin.yaml" }

# Minimal configuration for the editor
editor:
    config:
        removePlugins: null
        height: 300
        width: 'auto'
        ui:
            poweredBy:
                position: 'inside'
                side: 'right'
                label: ''
        htmlSupport:
            allow:
                # Allow any class or any data attribute in any (configured) tag
                - { classes: true, attributes: { pattern: 'data-.+' } }
        # the CSS file to be used inside the editor
        contentsCss:
            - 'EXT:provider/Resources/Public/main/css/editor.min.css?v114'
        toolbar:
            items:
                - sourceEditing
                - removeFormat
                - undo
                - redo
                - '|'
                - selectAll
                - '|'
                - link
                - insertTable
                - tableColumn
                - tableRow
                - mergeTableCells
                - '|'
                - sourceEditing
                - horizontalLine
                # line break
                - '|'
                - bold
                - italic
                - subscript
                - superscript
                - softhyphen
                - '|'
                - bulletedList
                - numberedList
                - blockQuote
                - indent
                - outdent
                - alignment
                - '|'
                - specialCharacters
                - '-'
                - style
                - heading

        stylesSet:
            # block level styles
            - { name: "Referenz", element: "sup", attributes: { class: "ap-inline-reference" } }
            - { name: "Beschreibung", element: "p", attributes: { class: "ap-caption" } }
            - { name: "Eyebrow", element: "p", attributes: { class: "ap-eyebrow" } }
            - { name: "Paragraph Large", element: "p", attributes: { class: "text-lg" } }
            - { name: "Paragraph Small", element: "p", attributes: { class: "text-xs" } }
            - { name: "Primary Button", element: "a", attributes: { class: "ap-btn ap-btn--primary" } }
            - { name: "Secondary Button", element: "a", attributes: { class: "ap-btn ap-btn--secondary" } }
            - { name: "Button Large", element: "a", attributes: { class: "ap-btn--lg" } }
            - { name: "Button Small", element: "a", attributes: { class: "ap-btn--sm" } }
            - { name: "Empty table head", element: "th", attributes: { class: "ap-table-empty" } }

        format_tags: "p;h1;h2;h3;h4;h5;h6"

Here Image how the RTE is looking

Bildschirmfoto vom 2024-02-26 10-57-55

Gitsko commented 9 months ago

Hi @Denneee , i don't know exactly why, but can you try to copy the YAML settings into yours: https://github.com/netresearch/t3x-rte_ckeditor_image/blob/main/Configuration/RTE/Plugin.yaml ?

Denneee commented 9 months ago

Sadly not helping

SicorDev commented 8 months ago

Doesn't work for me either, even with this barebones yaml:

imports:
  - { resource: "EXT:rte_ckeditor/Configuration/RTE/Default.yaml" }
editor:
  config:
    removePlugins: null
    importModules:
      -  '@netresearch/rte-ckeditor-image/Plugins/typo3image.js'
  externalPlugins:
    typo3image: { route: "rteckeditorimage_wizard_select_image" }
processing:
  allowTagsOutside:
    - img

=> PHP 8.2 TYPO3 12.4.11

Denneee commented 8 months ago

I could solve it. I looked and copared with other typo3 ckeditor plugins. For the Icon to apear in the editor you need to add the following to the toolbar:

  toolbar:
            items:
                - insertimage

because in the javascript code they named it like this: image

SicorDev commented 8 months ago

Thanks worked for me!

@ Extension Author: It seems like a lot of work, but it is possible to auto-add the required yaml bits with PHP in the Extension code, which would highly simplify the usage of your ext. The author of EXT:iconpack does that. I haven't fully reverse-engineered it, but the critical parts seem to be in this event listener:

EXT:iconpack\Classes\EventListener\IconpackPrepareConfigurationForEditor.php

CybotTM commented 8 months ago

Hello @SicorDev, feel free to open a new issue for this feature request.

Comments in closed issues are often overlooked.