Extend the CKEditor to add "classes" or to have a html editor

Community Newcomer's Corner
1

Hey,
i would like to extend my text preset of the text.free to add classes or to have a html Editor.

Is there a way to just extend the preset?

    'free':
      type: string
      defaultValue: ''
      ui:
        inlineEditable: true
        codeBlock: true
        inline:
          editorOptions:
            placeholder: 'Text eintragen...'
            autoparagraph: true
            hyphens: true
            formatting:
              strong: true
              em: true
              sub: true
              sup: true
              p: true
              h1: false
              h2: true
              h3: true
              h4: true
              h5: false
              h6: false
              pre: false
              table: true
              ol: true
              ul: true
              a: true
2
1 Like
3

Thanks for your help!
I am not able to run it, i am getting JS Erros.

What I did:

  1. I installed it with „composer require techdivision/ckstyles”
  2. I removed the comments in the Configuration (Plugins/TechDivision.CkStyles/Configuration)
  3. Did the Build with „./build.sh”

The JS Error I get: presetConfiguration.options[optionIdentifier].cssClass is null

4

I found the Error. It was because i had the CSS not defined in my styles. I did not know that the Plugin is checking that :smiley:

5

Hey Marc,
i tried to add the feature for the headlines to, but it wont show. Is there a way to extend other editors?

LG
Finn

6

hi can you please provide more detail? :wink:

7

Shure, i have different types of text elements.

A classic text element with a tex.full preset and one for headlines with less options for editing.

What i want is the option to select classes also in the headline element.

This is my text element:

'WG.Site:Content.Text':
  superTypes:
    'Neos.Neos:Content': true
    'Neos.NodeTypes.BaseMixins:TextMixin': true #for selecting css classes
  ui:
    label: Text
    icon: icon-file-text
    position: 200
    inlineEditable: true
  properties:
    text:
      options:
        preset: 'text.free'

and this is my headline element:

'WG.Site:Content.Headline':
  superTypes:
    'Neos.Neos:Content': true
    'Neos.NodeTypes.BaseMixins:TextMixin': true #for selecting css classes
  ui:
    label: Überschrift
    icon: icon-header
    position: 200
    inlineEditable: true
  properties:
    title:
      options:
        preset: 'text.title'

It works for the text element but not for the headline element.