CODEWITHSUNDEEP
classpluginsckeditorckeditor5craftcms
Nicj
Nicj

Reputation: 1

Adding costum classes to a list with the CKEditor Config options in Craft CMS

I am using CKEditor in Craft CMS and want to add custom classes to <ul> (unordered lists) and <ol> (ordered lists). While I’ve been able to successfully add custom classes to other elements in CKEditor, I’m struggling to apply the same logic to list elements.

Despite knowing that it’s possible to customize CKEditor’s behavior, I can’t figure out the exact implementation to dynamically attach custom classes to and elements within the editor. My goal is to ensure that whenever a list is created or edited in CKEditor, it automatically receives its respective custom class.

in the end i want my HTML code to look like this:

<ul class="class-ul">
   <li>entry 1</li>
   <li>entry 2</li>
   <li>entry 3</li>
</ul>

I already tryed something like this:

"list":{
"options":[   
{
        "model": "bulleted",
        "title": "Bulleted List",
        "view": {
          "attributes": {
            "id": "list-bulleted-0"
          },
          "classes": [
            "list-bulleted"
          ],
          "name": "ul"
        }
      }
]}

I know this code won't work but i tried anything around it also with no success. Maybe someone else had the same problem as me.

Upvotes: 0

Views: 72

Answers (1)

Seth Warburton
Seth Warburton

Reputation: 2413

I'd approach this by simply rewriting the output using Twig's replace filter, like this:

{% if richText %}
    {{ richText|replace({
        '<dl>': '<ul class="my-dl-styles">',
        '<ol>': '<ol class="my-ol-styles">',
        '<ul>': '<ul class="my-ul-styles">'
    }) }}
{% endif %}

Upvotes: 0

Related Questions