Not respecting custom styles when editing an entry

[mach1media]

Description

I created a custom style definition for my new CKEditor field, called "Alert:Success"

{
  "code": {
    "indentSequence": "  "
  },
  "style": {
    "definitions": [
      {
        "classes": [
          "alert-success alert"
        ],
        "element": "p",
        "name": "Alert:Success"
      }
    ]
  }
}

First issue is that this only works when the element type is p versus div - When using element type div the Style dropdown menu in the editor's toolbar shows this option in the "Block Styles" section, but does nothing when I click that option. Only when using element type p does the Style dropdown actually apply the change to the markup within the field.

The main issue, though, is that after applying this custom style to a paragraph of text, the change is successfully saved to the database, but the next time I edit this entry, the element attribute that was saved to the database is somehow stripped from the markup that appears in the same field.

Meaning, this markup that was saved to the database properly...

<p class="alert-success alert">...</p>

...appears like this when editing the same entry again...

<p>...</p>

The class attribute applied to the p tag on save is being stripped out the next time editing the entry.

Steps to reproduce

1. Create custom style in CKEditor config
2. Apply custom style to block of text in an entry
3. Save entry
4. View entry on front-end to verify the custom markup was saved properly
5. Edit the same entry in Craft control panel
6. Notice that the markup applied by custom style tool is removed.

Additional info

• Craft version: Craft CMS 4.4.13
• PHP version: 8.1.2
• Database driver & version:
• Plugins & versions: CKEditor 3.4.0
• Safari browser

[i-just]

Hi, thanks for reaching out. I was able to reproduce this behaviour, and it’s down to style > definitions > classes. classes should be an array of strings, so in your case, you should change:

"classes": [
  "alert-success alert"
],

to

"classes": [
  "alert-success",
  "alert"
],

Regarding only working with p and not div, div elements are not supported out of the box in CKEditor5. You can find a bit more info on it at ckeditor/ckeditor5#1314 and ckeditor/ckeditor5#6462

I hope this helps!

[mach1media]

Thanks Iwona, I also realized we could add an htmlSupport block to the config JSON like this… return { code: { indentSequence: ' ', }, style: { definitions: [ { classes: [ 'fn-marker', ], element: 'span', name: 'Footnote', }, ], }, htmlSupport: { allow: [ { name: 'div', styles: true, classes: true }, { name: 'p', classes: true } ] } } …which seems to do the trick. Roger Glenn 512-922-7384 iPhone ***@***.*** mach1media.com craftcmsdeveloper.com

…

On May 31, 2023, at 5:48 AM, Iwona Just ***@***.***> wrote: Hi, thanks for reaching out. I was able to reproduce this behaviour, and it’s down to style > definitions > classes. classes should be an array of strings, so in your case, you should change: "classes": [ "alert-success alert" ], to "classes": [ "alert-success", "alert" ], Regarding only working with p and not div, div elements are not supported out of the box in CKEditor5. You can find a bit more info on it at ckeditor/ckeditor5#1314 <ckeditor/ckeditor5#1314> and ckeditor/ckeditor5#6462 <ckeditor/ckeditor5#6462> I hope this helps! — Reply to this email directly, view it on GitHub <#105 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAFUZOU4LV2U7OYVSGZMUHLXI4OXRANCNFSM6AAAAAAYRMPJ44>. You are receiving this because you authored the thread.