<p>After a lot of digging, I came across this Issue for the CKEditor plugin which explains how to add htmlSupport configs.</p>
<p><a href="https://github.com/craftcms/ckeditor/issues/217" rel="nofollow noreferrer">https://github.com/craftcms/ckeditor/issues/217</a></p>
<p>Toggling the SoureEdit button now retains div tags and can be limited to a single class.</p>
<pre><code>  &quot;htmlSupport&quot;: {
    &quot;allow&quot;: [
      {
        &quot;attributes&quot;: true,
        &quot;classes&quot;: [
          &quot;alert&quot;
        ],
        &quot;styles&quot;: false
      }
    ]
  }
</code></pre>
<p>As @i-just points out, &quot;name&quot; isn't required.  It can be added, but only single tags are recognized (eg. &quot;div&quot;).  Any regex is ignored.  This might be a bug in the CKEditor plugin not recognizing regular expressions in the config.  I have to assume that omitting the &quot;name&quot; HTML Support config will apply to all tags.</p>

CC BY-SA 4.0
2024-07-02T14:46:54.060Z
2024-07-02T14:46:54.060Z
Sean
<p>I'm trying to get used to CKEditor after using Redactor for so long in Craft.  I'm simply trying to allow the use of div tags in CKEditor.  I have found several conflicting instructions, none of which work.  Using the &quot;Source&quot; button in CKEditor I try to add a  tag, but it is always replaced with a <p> tag, or removed on save.</p>
<p>I see no way of reliably adding something like &quot;AllowContent:true&quot; since CKEditor is configured through /admin/settings/ckeditor.  And adding</p>
<p><code>&quot;HTML.Allowed&quot;: &quot;div[class],p,b,strong,i,em,a[href|title],ul,ol,li&quot;,</code></p>
<p>to my <strong>/config/htmlpurifier/Default.json</strong> has no effect.</p>
<p>On a related note... <code>&quot;Attr.EnableID&quot;: true</code> has no effect either.</p>
<p>Thanks for any help!</p>

CC BY-SA 4.0
2024-06-27T18:25:49.880Z
Apparently, the HTML.Allowed does work in HTMLPurifier.  The effects don't show up until you create a new field in an entry, not on existing fields.  However, toggling the SourceEditing button is what is stripping the classes and replacing divs with p tags.  So is there a way to fix this problem?  It looks like General HTML Support would be useful (https://ckeditor.com/docs/ckeditor5/latest/features/html/general-html-support.html) but how do you enable that in Craft?
Sean
<ckeditor>
How can I allow div tags in CKEditor 5 in Craft CMS 5?
# How can I allow div tags in CKEditor 5 in Craft CMS 5?

(Asked by: username_0 on 2024-06-27)

I'm trying to get used to CKEditor after using Redactor for so long in Craft. I'm simply trying to allow the use of div tags in CKEditor. I have found several conflicting instructions, none of which work. Using the "Source" button in CKEditor I try to add a tag, but it is always replaced with a

tag, or removed on save.

I see no way of reliably adding something like "AllowContent:true" since CKEditor is configured through /admin/settings/ckeditor. And adding

`"HTML.Allowed": "div[class],p,b,strong,i,em,a[href|title],ul,ol,li",`

to my **/config/htmlpurifier/Default.json** has no effect.

On a related note... `"Attr.EnableID": true` has no effect either.

Thanks for any help!

**Tags:** ckeditor

> **Comments:**
> **username_0**: Apparently, the HTML.Allowed does work in HTMLPurifier.  The effects don't show up until you create a new field in an entry, not on existing fields.  However, toggling the SourceEditing button is what is stripping the classes and replacing divs with p tags.  So is there a way to fix this problem?  It looks like General HTML Support would be useful (https://ckeditor.com/docs/ckeditor5/latest/features/html/general-html-support.html) but how do you enable that in Craft?  

---

## 1 answers

### Answer by username_0 on 2024-07-02. Score: 2

After a lot of digging, I came across this Issue for the CKEditor plugin which explains how to add htmlSupport configs.
https://github.com/craftcms/ckeditor/issues/217
Toggling the SoureEdit button now retains div tags and can be limited to a single class.
  "htmlSupport": {
    "allow": [
      {
        "attributes": true,
        "classes": [
          "alert"
        ],
        "styles": false
      }
    ]
  }

As @i-just points out, "name" isn't required.  It can be added, but only single tags are recognized (eg. "div").  Any regex is ignored.  This might be a bug in the CKEditor plugin not recognizing regular expressions in the config.  I have to assume that omitting the "name" HTML Support config will apply to all tags.


---

