• Login
  • Register

DNN Blogs

Written for the Community, by the Community

Help! DNN CKEditor is cleaning my HTML

Written By Timo Breumelhof
2019-10-25

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 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).
https://ckeditor.com/docs/ckeditor4/latest/guide/dev_acf.html

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 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.
    Examples:
    - 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

    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: 3 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 ·

Would you like to help us?

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

Get Involved