Answers.Body: <p>This doesn't answer your question directly, but would simply rewriting the output in your template solve your problem? If you wanted such classes to <em>always</em> be applied then you can just do something like this in Twig:</p>
  <pre><code>{{ richText|replace({
    '&lt;ul&gt;': '&lt;ul class=&quot;class1&quot;&gt;',
    '&lt;ol&gt;': '&lt;ol class=&quot;class2&quot;&gt;',
  }) }}
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2023-09-07T16:14:36.537Z
Answers.Text: I need to be able to add different classes to each `<ul>` element, so this wouldn't work, unfortunately.
Answers.UserDisplayName: user3092
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2023-09-07T09:20:27.140Z
Answers.LastActivityDate: 2023-09-07T09:20:27.140Z
Answers.UserDisplayName: Seth Warburton
Answers.Body: <p>The CKEditor5 plugin supports custom configuration on a per-field basis, which can include style definitions. In the <a href="https://github.com/craftcms/ckeditor#configuration" rel="nofollow noreferrer">documentation</a>, you'll see how to create a custom field config. So it sounds like you might want to add a style definition like so:</p>
  <pre><code>  style: {
      definitions: [
        {
          name: 'Class One',
          element: 'ul',
          classes: ['class-1']
        },
        {
          name: 'Class Two',
          element: 'ul',
          classes: ['class-2']
        },
      ]
    }
  
  </code></pre>
  <p>Once these are registered, they should show up in the &quot;styles&quot; dropdown, and be applicable when the matching tag is selected. You can also the CSS for these styles in the Custom Styles field, which controls how they are displayed in the editor.</p>
  <p>Once these styles are registered, CKEditor shouldn't filter them out on save. The HTMLPurifier config is helpful in this case as well.</p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2023-09-12T23:02:43.223Z
Answers.LastActivityDate: 2023-09-12T23:02:43.223Z
Answers.UserDisplayName: Dalton Rooney
Body: <p>CKEditor5 filters out any classes applied to HTML elements. However, I'd like to allow certain classes to be applied to <code>&lt;ul&gt;</code> elements (e.g. <code>class1</code>, <code>class2</code>) without CKEditor5 stripping them out.</p>
  <p>I tried creating an HTML Purifier config (as below), but the classes I apply in Source still gets stripped out upon save.</p>
  <pre><code>{
     &quot;HTML.Allowed&quot;: &quot;ol[class],li&quot;
  }
  </code></pre>
  
Tags: <ckeditor5>
Title: Prevent CKEditor5 from filtering out classes
ThreadText: # Prevent CKEditor5 from filtering out classes
  
  (Asked by: username_0 on 2023-09-06)
  
  CKEditor5 filters out any classes applied to HTML elements. However, I'd like to allow certain classes to be applied to `<ul>` elements (e.g. `class1`, `class2`) without CKEditor5 stripping them out.
  
  I tried creating an HTML Purifier config (as below), but the classes I apply in Source still gets stripped out upon save.
  
  ```
  {
     "HTML.Allowed": "ol[class],li"
  }
  
  ```
  
  **Tags:** ckeditor5
  
  
  ---
  
  ## 2 answers
  
  ### Answer by username_1 on 2023-09-07. Score: 1
  
  This doesn't answer your question directly, but would simply rewriting the output in your template solve your problem? If you wanted such classes to *always* be applied then you can just do something like this in Twig:
  
  ```
  {{ richText|replace({
    '<ul>': '<ul class="class1">',
    '<ol>': '<ol class="class2">',
  }) }}
  
  ```
  
  > **Comments:**
  > **username_0**: I need to be able to add different classes to each `<ul>` element, so this wouldn't work, unfortunately.  
  
  ---
  
  ### Answer by username_2 on 2023-09-12. Score: 0
  
  The CKEditor5 plugin supports custom configuration on a per-field basis, which can include style definitions. In the [documentation](https://github.com/craftcms/ckeditor#configuration), you'll see how to create a custom field config. So it sounds like you might want to add a style definition like so:
  
  ```
    style: {
      definitions: [
        {
          name: 'Class One',
          element: 'ul',
          classes: ['class-1']
        },
        {
          name: 'Class Two',
          element: 'ul',
          classes: ['class-2']
        },
      ]
    }
  
  ```
  
  Once these are registered, they should show up in the "styles" dropdown, and be applicable when the matching tag is selected. You can also the CSS for these styles in the Custom Styles field, which controls how they are displayed in the editor.
  
  Once these styles are registered, CKEditor shouldn't filter them out on save. The HTMLPurifier config is helpful in this case as well.
  
  
  ---
  
  