Typo3 CKEditor调整大小的图像保持300px的宽度

时间：2018-06-19 14:56:47

标签： ckeditor typo3 tsconfig fal

在阅读了文档（请参阅https://docs.typo3.org/typo3cms/extensions/rte_ckeditor_image/和其他相关问题（请参见Typo3 CKEditor image from FAL）之后，我仍然遇到问题，即在保存内容后图像保持300px的宽度。

关于cursios的事情是，第一次加载了后端视图，在保存了cpntent之后，调整大小功能就起作用了。后端和前端的图像大小正确。

当我第二次更改大小并保存内容时，它将再次获得300px的宽度。

在我看来，第二次忽略该配置。

有人得到建议吗？

我已经多次清除了缓存，重新加载了框架以便在后端获取其他js并再次保存。

配置：

page_ts_config.ts（行中无注释）

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

1 个答案:

答案 0 :(得分：0)

对于Contentelement Images，我在页面的通用TypoScript模板中使用此设置来扩展呈现的宽度：

tt_content.image {
  dataProcessing.20 {
    maxGalleryWidth = 644
    maxGalleryWidthInText = 644
  }
}

但是Contentelement image与CKEditor无关。

如果您在TypoSript对象浏览器中搜索，则还会找到其他内容元素的最大值300，可能是textpic和textmedia。 您也可以以相同的方式更改这些元素。看起来像这样：

tt_content.textmedia {
  dataProcessing.20 {
    maxGalleryWidth = 644
    maxGalleryWidthInText = 644
  }
}

tt_content.textpic {
  dataProcessing.20 {
    maxGalleryWidth = 644
    maxGalleryWidthInText = 644
  }
}

这些元素然后与CKEditor相关。
您也可以尝试以相同的方式更改高度，但我不确定这是否可行，因为在TypoSript对象浏览器中看不到相应的高度变量。

当然，您可以使用要根据布局定义的值。

相关问题
最新问题