Question

I'm currently developing using Kentico CMS, which makes use of CKEditor.

We're using Bootstrap as part of our development, and therefore sometimes require quirky HTML.

CKEditor seems to be auto-correcting the HTML:

Before:

<a href="#" class="list-group-item">
  <h4 class="list-group-item-heading">NEBOSH Revision</h4>
  <p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare mattis vulputate. Nullam eu est quis risus congue feugiat. Sed ut erat accumsan.</p>
</a>

After:

<h4 class="list-group-item-heading">
   <a class="list-group-item" href="#">NEBOSH Revision</a>
</h4>
<p class="list-group-item-text">
   <a class="list-group-item" href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare mattis vulputate. Nullam eu est quis risus congue feugiat. Sed ut erat accumsan.</a>
</p>

I've been reading up on the "config.allowedContent = true" option to disable the Advanced Content Filter but it doesn't seem to be working.

I don't know if this is because I'm doing it incorrectly, or if it's because this option won't fix my problem.

Inside my config.js file I have tried setting:

CKEDITOR.editorConfig = function (config) {
    config.allowedContent = true;

And setting it like this:

CKEDITOR.config.allowedContent = true;

CKEDITOR.editorConfig = function (config) {
Was it helpful?

Solution

Your problem has nothing to do with Allowed Content Filter. CKEditor 4.x is HTML4/xHTML 1.1 editor (static DTD) and those standards don't allow block elements inside of links (see this answer). This is why CKEditor's parser considers your HTML invalid and corrects it.

You got to change your markup to make it compatible with CKEditor (see this answer).

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top