Reputation: 11

Typo3 CKEditor resized image stays at 300px width

after reading the documentation (see https://docs.typo3.org/typo3cms/extensions/rte_ckeditor_image/) and other questions related (see Typo3 CKEditor image from FAL) i still got the problem, that images stays at 300px width after saving the content.

The cursios thing about that is, that the first time, the backend-view has been loaded, the resizing function works after saving the cpntent. The images size is correct in backend and frontend.

When i change the size a second time and save the content it gets the width of 300px again.

It seems for me, that the configuration is ignored the second time.

Anybody got an advice?

I have cleared the cache multiple times, reloaded the frame in order to get other js in backend and saved again.

the configuration:

page_ts_config.ts (no comment in lines)

RTE.default.buttons.image.options.magic {
    maxWidth = 1200
    maxHeight = 1200
}

RTE.default.buttons.image.options.plain {
    maxWidth = 1200
    maxHeight = 1200
}

ext_localconf.php

$GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']['default'] = 'fileadmin/templates/yaml/rte/config.yaml';

fileadmin/templates/yaml/rte/config.yaml

#
# Load default processing options
imports:
    - { resource: "fileadmin/templates/yaml/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_image/Configuration/RTE/Plugin.yaml" }
# Custom configuration for the editor
editor:
  #externalPlugins: find, dialog, dialogui, fakeobjects, ckfinder
  #externalPlugins: 
    #imageuploader: { resource: 'SYSEXT:rte_ckeditor/plugins/imageuploader' } 
    #ckfinder: { resource: "EXT:rte_ckeditor/plugins/ckfinder" }

  config:
    toolbarGroups:
    # TODO: find/replace doesn't work/show up although given in config
      - { name: editing, groups: [find, replace, selection, spellchecker, editing] }
      - { name: basicstyles, groups: [ basicstyles, cleanup] }
      - { name: clipboard, groups: [clipboard, undo] }
      - { name: document, groups: [mode, document, doctools] }
      - { name: forms, groups: [forms] }
      - { name: paragraph, groups: [list, indent, blocks, align, bidi, paragraph] }
      - { name: links, groups: [links] }
      - { name: insert, groups: [insert] }
      - { name: styles, groups: [styles, format] }
      - { name: colors, groups: [colors] }
      - { name: tools, groups: [tools] }
      - { name: others, groups: [others] }
      - { name: about, groups: [about] }
    removeButtons:
      - Anchor
      - Superscript
      - Subscript
      - Strike
      - Font
      - FontSize
      - Save
      - NewPage
      - Preview
      - Print
      - Templates
      - Cut
      - Copy
      - Paste
      - PasteText
      - PasteFromWord
      - SelectAll
      - Scayt
      - Form
      - Checkbox
      - HiddenField
      - Radio
      - TextField
      - Textarea
      - Button
      - ImageButton
      - CopyFormatting
      - Blockquote
      - CreateDiv
      - JustifyLeft
      - JustifyCenter
      - JustifyRight
      - JustifyBlock
      - BidiLtr
      - BidiRtl
      - Language
      - Unlink
      - Flash
      - Smiley
      - PageBreak
      - Iframe
      - Maximize
      - ShowBlocks
      - About
      - TextColor
      - BGColor      
    format_tags: "p;h1;h2;h3;h4"
    contentsCss: "/fileadmin/templates/css/rte.css"
    stylesSet:
      - { name: "Textlink", element: "a",  attributes: { class: "textlink" } } 
      - { name: "Textlink im Layer öffnen", element: "a",  attributes: { class: "textlink layerbox" } }
      - { name: "RSS", element: "a",  attributes: { class: "rss" } }
      - { name: "Button-Link", element: "a",  attributes: { class: "button" } }
      - { name: "Button-Link im Layer öffnen", element: "a",  attributes: { class: "button layerbox" } }
      - { name: "Großer Button-Link", element: "a",  attributes: { class: "button big" } }
      - { name: "Großer Button-Link im Layer", element: "a",  attributes: { class: "button big layerbox" } }
      - { name: "Blauer Button-Link", element: "a",  attributes: { class: "button blue" } }
      - { name: "Blauer Button-Link im Layer", element: "a",  attributes: { class: "button blue layerbox" } }
      - { name: "Großer blauer Button-Link", element: "a",  attributes: { class: "button big blue" } }
      - { name: "Großer blauer Button-Link im Layer", element: "a",  attributes: { class: "button big blue layerbox" } }
      - { name: "Umfließen links", element: "img",  attributes: { class: "floatleft" } }
      - { name: "Umfließen rechts", element: "img",  attributes: { class: "floatright" } }
      - { name: "nicht umfließen", element: "img",  attributes: { class: "floatnone" } }
      - { name: "Zentrieren", element: "p", attributes: { class: "center"}}

fileadmin/templates/yaml/rte/processing.yaml

processing:
  # previously known as "ts_css" for transformations
  mode: default
  # Tags that are allowed in the content in general
  allowTags:
    - table 
    - tbody 
    - tr 
    - th
    - td
    - h1
    - h2
    - h3
    - h4
    - h5
    - h6
    - div
    - p
    - br
    - span
    - ul
    - ol
    - li
    - re
    - blockquote
    - strong
    - em
    - b
    - i
    - u
    - ub
    - sup
    - strike
    - a
    - img
    - nobr
    - hr
    - tt
    - q
    - cite
    - abbr
    - acronym
    - center

  denyTags:
    - font
## erlaubte Attribute in p, div tags
  keepPDIVattribs: [align, class, style, id]

  ## br wird nicht zu p konvertiert
  dontConvBRtoParagraph: 1

  ## List all class selectors that are allowed on the way to the database
  allowedClasses: [txtlink, button, layerbox, zebra_row, zebra_column,visual, big, blue, center]

  ## Keine Maskierung für HTML-Chars
  htmlSpecialChars: 0
  htmlSpecialChars.preserveEntities: 1

  rmTagIfNoAttrib: span,div,font

  ## Do not allow insertion of the following tags
  hideTags: font

  ## tags die untersagt sind
  removeTags: font

  ## entfernt html-kommentare
  removeComments: 1

  ## Tags die nicht übereinstimmen werden nicht entfernt (protect / 1 / 0)
  keepNonMatchedTags: 0
## Tags that are allowed outside of paragraphs
  allowTagsOutside: img, hr
## allowed default attributes
  allowAttributes: [class, id, title, dir, lang, xml:lang, itemscope, itemtype, itemprop]
## CONTENT TO DATABASE
  HTMLparser_db:
    ## STRIP ALL ATTRIBUTES FROM THESE TAGS
    ## If this list of tags is not set, it will default to: b,i,u,br,center,hr,sub,sup,strong,em,li,ul,ol,blockquote,strike.
    ## However, we want to keep xml:lang attribute on most tags and tags from the default list were cleaned on entry.
    noAttrib: b, i, u, strike, sub, sup, strong, em, quote, blockquote, cite, tt, br, center
    # Can be disabled if you trust ckeditor (If Automatic Content Formatting is enabled, this should be OK)
    # allowTags: %default%
    allowTags: table, tbody, tr, th, td, h1, h2, h3, h4, h5, h6, div, p, br, span, ul, ol, li, re, blockquote, strong, em, b, i, u, sub, sup, strike, a, img, nobr, hr, tt, q, cite, abbr, acronym, center
    denyTags: font
    tags:
      hr:
        allowedAttribs:
          - class

    # Keine Maskierung beim Speichern von HTML-Chars
    htmlSpecialChars: -1

    rmTagIfNoAttrib: span,div,font
## REMOVE OPEN OFFICE META DATA TAGS, WORD 2003 TAGS, LINK, META, STYLE AND TITLE TAGS, AND DEPRECATED HTML TAGS
    ## We use this rule instead of the denyTags rule so that we can protect custom tags without protecting these unwanted tags.
    removeTags: center, font, link, meta, o:p, sdfield, strike, style, title, u
## PROTECT CUSTOM TAGS
    keepNonMatchedTags: protect

Upvotes: 0

Typo3 CKEditor resized image stays at 300px width

Answers (2)

Related Questions