DNN Blogs

Written for the Community, by the Community

Help! DNN CKEditor is cleaning my HTML

Written By Timo Breumelhof (40F)

A number of users have reported a "Bug" in the CKEditor implementation for DNN, both in the forums and on GitHub.
When they edit the HTML in source view and switch back to WYSIWYG, some elements, classes and id's are stripped out.
This was not the case in Rad Editor (which you should not be using any more). Here's how to "fix" this.

I don't think all DNN Admins realise this, but the DNN CKEditor (https://github.com/DNN-Connect/CKEditorProvider) provider basically is nothing more than a wrapper around the CKEditor (https://ckeditor.com/), with an interface to most of the settings the CKEditor provides.

This is not a bug, but the default behaviour of the CKEditor. It tries to keep the HTML a user enters as clean as possible (which is also the reason why it handles content pasted from Word or other sources quite well). CKEditor tries to strip out all HTML a user normally could not enter using the WYSIWYG editor, so the amount of filtering also depends on the CKEditor toolbar mode (basic, standard or full).

I understand this can be annoying when you’re used to another (more liberal) editor, but in principle, for many site this seems like a logical filter to me. Why would you limit a user’s toolbars and allow them to enter "other elements" in source view?
Rad Editor allowed a user to enter much more in source view but was less good a keeping the HTML clean in my experience.

Luckily almost any setting of CKEditor can be configured and overruled.
The setting you nee dto change to overrule this filtering is "extraAllowedContent".
It's a "wildcard string" of extra allowed content.
On a single admin site it's fine to change this, on a multi (non-technical) editors site, one should be a bit more careful allowing all kinds of extra class/ inline styles etc IMO.

Set AllowedContent or extraAllowedContent

  1. Open the CKEditor options by either:
    Host Host HTML Editor Manager HTML Editor Manager Host
    A.       Click the link below the editor
    B. DNN8 =  Host > HTML Editor Manager
      DNN9 = Site Settings > Site Behavior > More > HTML Editor Manager
    (superusers/hosts only)


  2. Open de Editor config tab.
  3. Select a level to apply the new setting for (site / page / module)
  4. Scroll down to the "extraAllowedContent" setting.
  5. Enter string with the extra allowed content.
    - iframe video > allow iframes and video elements
    - iframe video(left,right)  > allow iframes and video elements with a “left” or “right” class
    - *(*){*} > allow all elements with classes or id
    - *[*] > allow all elements and all attributes
  6. Alternatively you can also set AllowedContent  = true.
    If you do that all filtering is off and "everything" is allowed.

    More details: https://ckeditor.com/docs/ckeditor4/latest/guide/dev_allowed_content_rules.html

Filter demos: https://ckeditor.com/docs/ckeditor4/latest/examples/acf.html

I hope that explains the behaviour of CKEditor a bit better and allows some users to change its behaviour.

Total: 6 Comment(s)
Friday, October 25, 2019 ·
@muddeatr You were not the only one asking about this :-) After you posted the affected HTML and Ingo's reply it's now clear your issue is due to the CKEditor DTD. When I get a "fix" for that to work, I'll add it to this blog post.
Sunday, October 27, 2019 ·
I had looked for this information before and hadn't found it. Thanks Timo!
Saturday, October 26, 2019 ·
Thanks Timo, this is really helpful.
Wednesday, August 26, 2020 ·
Sorry for intrusion. But the issue with the DNN CKEditor hasn't been solved as yet. I have the lates DNN 9.10.1 version. I've tried what Timo sauggested. Still I cannot use EasyDNN IDs and Classes on my page. Regards.
Monday, September 6, 2021 ·
Actually, the issue you experience is a new issue, introduced with the upgrade of the Editor see: https://github.com/dnnsoftware/Dnn.Platform/issues/4620
Wednesday, September 8, 2021 ·

Would you like to help us?

Awesome! Simply post in the forums using the link below and we'll get you started.

Get Involved