Project

General

Profile

Actions

Bug #82310

closed

Missing "Object styles" in RTE when overriding default preset in TYPO3 8.7.5

Added by Luis García over 6 years ago. Updated about 6 years ago.

Status:
Rejected
Priority:
Should have
Assignee:
-
Category:
RTE (rtehtmlarea + ckeditor)
Target version:
Start date:
2017-09-05
Due date:
% Done:

0%

Estimated time:
TYPO3 Version:
8
PHP Version:
7.1
Tags:
rte object styles
Complexity:
Is Regression:
Yes
Sprint Focus:

Description

This used to work before updating from 8.7.4 to 8.7.5.

In ext_localconf.php of the sitepackage:

$GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']['default'] = 'EXT:' . $_EXTKEY . '/Configuration/RTE/Default.yaml';

An example of the missing styles:

editor:
  config:
    stylesSet:
      - name: "Fließtext klein" 
        element: [ "p", "div", "span" ]
        attributes: { class: "flowtext-small" }

I noticed that if I change a little the syntax, it gets at least recognized as "inline style":

editor:
  config:
    stylesSet:
      - name: "Fließtext klein" 
        element: "p,div,span" 
        attributes: { class: "flowtext-small" }


Files

Screenshot 2017-09-05 22.55.34.png (10.1 KB) Screenshot 2017-09-05 22.55.34.png 1st screenshot Jochen Weiland, 2017-09-05 23:02
Screenshot 2017-09-05 22.56.02.png (9.21 KB) Screenshot 2017-09-05 22.56.02.png 2nd screenshot Jochen Weiland, 2017-09-05 23:02
Actions #1

Updated by Oliver Hader over 6 years ago

Might be the result of issue #81882 (unconfirmed)

Updated by Jochen Weiland over 6 years ago

We also noticed that custom styles disappeared from the CKEditor RTE in 8.7.5 (worked in 8.7.4).

After the RTE is loaded the style dropdown list ist empty (see 1st screenshot), when clicking on the text in the RTE the style tab is disabled (2nd screenshot).

Actions #3

Updated by Josef Glatz over 6 years ago

Jochen Weiland wrote:

We also noticed that custom styles disappeared from the CKEditor RTE in 8.7.5 (worked in 8.7.4).

I can confirm that too! As a workaround you can click on the element name in the element path of the CKEditor (immediately after the WYSIWYG content area)


And for the records: I defined my custom style in the yaml in the way:

    stylesSet:
        - { name: "Link Button", element: "a", attributes: { 'class': 'btn btn-primary' } }

Actions #4

Updated by Luis García over 6 years ago

Josef Glatz wrote:

[...]
And for the records: I defined my custom style in the yaml in the way:
[...]

I also used to do that way, but I decided to write a cleaner and tidier version. Both versions are valid YAML code and this is, in the end, just a matter of taste.

I'll do more testing and post the results as soon as I have a little time for it.

Actions #5

Updated by Jasmina Ließmann over 6 years ago

I can confirm this behaviour too. I'm in the middle of a project and have a yaml configuration, which worked as aspected. But since 1-2 weeks the styleset section is empty. I have styles for blockquote and links, both were available, but now they are not visible anymore in the styleset setion.

Espected behaviour in the past:
  • attributes only work for defined element type
Behaviour now:
  • styles are available for several elements (not only for the defined element type)
  • element changes his tag to the type of the defined element

For example:

- {name: "Headline right", element: "h2", attributes: {data-align: "right"}}

I can apply this style to every blockstyle (e.g. blockquote, h4) and it becomes a h2 with the defined attribute.

Actions #6

Updated by Gerrit Code Review over 6 years ago

  • Status changed from New to Under Review

Patch set 1 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/53929

Actions #7

Updated by Benni Mack over 6 years ago

  • Target version set to next-patchlevel

Could you please see my changes and tell me if it solves your issues? Thanks for a quick feedback!

Actions #8

Updated by Christoph Lehmann over 6 years ago

We use a custom configuration too:

$GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']['custom'] = 'EXT:site_ext/Configuration/TsConfig/Rte/Custom.yaml';

RTE {
    default {
        preset = custom
    }
}

For me the problems are

1. After saving the align classes are missing
2. Link styles are missing in link editor

classes.:
  button.:
    name: Button Link

buttons.:
  link.:
    relAttribute.:
      enabled: true
    properties.:
      class.:
        allowedClasses: 'button'

Benni, your patch does not work for me

Actions #9

Updated by Andreas Wolf over 6 years ago

I currently don’t have a test setup for this ready, but could somebody do me a favor and test the following:


element:
- name: h1
- name: h2

As far as I can see from CKEditor’s code (style.js), this should work. We have to specify an array of objects with a name property; a plain array with the name as string will not be recognized (cf. https://github.com/ckeditor/ckeditor-dev/blob/4.7.0/core/style.js#L341)

Actions #10

Updated by Jasmina Ließmann over 6 years ago

The patch from benni doesn't work for me either.

@Andreas Otto †:
Sorry, but I don't get it. How could I implement the 'element' section?

Example:

editor:
  config:
    stylesSet:
      - {name: "blockquote left", element: "blockquote", attributes: {data-align: "left"}}
      - {name: "blockquote right", element: "blockquote", attributes: {data-align: "right"}}

Actions #11

Updated by Susanne Moog over 6 years ago

As far as I can see:

- Multiple elements in element definition worked by accident, documentation of CKEditor clearly states that the selector is for ONE element only (the definition worken in CKEditor 4.6 by accident, but displaying the selected class did never work)
- When switching stylesets the corresponding tag gets switched, too - (so h2 becomes h3 if headline 3 gets selected) - was that way even before the update (just tested) and is also working that way in a plain CKEditor installation

Could you all please check, whether your configuration works on a plain CKEditor (for example via https://jsfiddle.net/4f2xofr3/ )

Actions #12

Updated by Frans Saris over 6 years ago

Also the docs don't mention the use of multiple elements https://docs.ckeditor.com/#!/guide/dev_howtos_styles-section-how-do-i-customize-the-styles-drop-down-list%3F

@Jochen Fröhlich Weiland can you provide your configuration is there also an wrong element value?

There is an issue in the CKEditor bugtracker that also mentions an empty dropdown https://github.com/ckeditor/ckeditor-dev/issues/727 maybe this is somehow related

Actions #13

Updated by Christoph Lehmann over 6 years ago

Here is my complete example: : https://gist.github.com/christophlehmann/7aad1908085f106541da93d8112e6069

Problems remain with 8.7.6
  • Link classes are missing
  • Justify classes and custom styles like "Kleine Schrift" are resetted when saving

As of the example in https://docs.ckeditor.com/#!/guide/dev_howtos_styles-section-how-do-i-customize-the-styles-drop-down-list%3F

CKEDITOR.stylesSet.add( 'my_styles', [
    // Block-level styles
    { name: 'Blue Title', element: 'h2', styles: { 'color': 'Blue' } },
    { name: 'Red Title' , element: 'h3', styles: { 'color': 'Red' } },

    // Inline styles
    { name: 'CSS Style', element: 'span', attributes: { 'class': 'my_style' } },
    { name: 'Marker: Yellow', element: 'span', styles: { 'background-color': 'Yellow' } }
] );

This is my interpretation of what should work, but with that the editor is not shown at all

    stylesSet:
      mystyles:
        - { name: "Kleinere Schrift", element: "p", attributes: { 'class': 'small' }}
        - { name: "Mobil nicht anzeigen", element: "p", attributes: { 'class': 'hidden-phone' }}

Working examples would be nice...

Actions #14

Updated by Luis García over 6 years ago

Thanks to the tips by Susane Moog:

[...] documentation of CKEditor clearly states that the selector is for ONE element only [...]

I could get a working configuration and I also noticed that the name of the style has to be unique.

My configuration now looks like this:

editor:
  config:
    stylesSet:
      - name: "Fließtext klein [Absatz]" 
        element: "p" 
        attributes: { class: "flowtext-small" }

      - name: "Fließtext klein [Div]" 
        element: "div" 
        attributes: { class: "flowtext-small" }

      - name: "Fließtext klein" 
        element: "span" 
        attributes: { class: "flowtext-small" }

Otherwise, the inline styles won't work properly.

Actions #15

Updated by Christoph Lehmann over 6 years ago

I found the reason for my issues and why the styles are not saved: A third-party extension set PageTS-Config

RTE.default.proc.allowedClasses := addToList(mfp-link external-link-new-window, mfp-link internal-link-new-window, mfp-link download)
RTE.default.classesAnchor := addToList(mfp-link external-link-new-window, mfp-link internal-link-new-window, mfp-link download)
RTE.default.buttons.link.properties.class.allowedClasses := addToList(mfp-link external-link-new-window, mfp-link internal-link-new-window, mfp-link download)

That breaks the behaviour of the ckeditor.

Actions #16

Updated by Frans Saris about 6 years ago

  • Status changed from Under Review to Rejected

Closed as this isn't supposed be ckeditor/a configuration error

Actions

Also available in: Atom PDF