TYPO3 Core

Might be the result of issue #81882 (unconfirmed)

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' } }

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.

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.

• attributes only work for defined element type

• 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.

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

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)

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"}}

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/ )

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

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

• 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...

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.

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.