CKEditor 4 nested span elements gets removed after initializing inline editing

Question

I have a div which is contenteditable=true. When i double click it, i trigger this code of inline editing in CKEditor and it successfuly displays the CKEditor toolbars

 $("#content_id").attr("contenteditable", true);
 ckeditor_instance = CKEDITOR.inline( content_id );

Now i have a LineHeight and LetterSpacing plugin which appears to be a dropdown in CKEditor toolbar (a plugin made by others which i copied only the implementation) and there is problem when i set the LineHeight and LetterSpacing of a text and reinitializing again the ckeditor

To make it clear, here is the scenario :

This is the default html of the div

<div id="mycontent" contenteditable=true>
    <span>The quick brown fox jumps over the lazy dog</span>
</div>

1.When i double click the div, i trigger the CKEDITOR.inine( content_id ) code i mentioned above. When i set the LetterSpace to lets say 6px, the div is now like this which is correct

<div id="mycontent" contenteditable=true>
    <span style="letter-spacing:6px;">
        <span>The quick brown fox jumps over the lazy dog</span>
    </span>
</div>

2.When i set the LineHeight lets say 2px, the div is now like this,

 <div id="mycontent" contenteditable=true>
    <span style="line-height:2px;">
        <span style="letter-spacing:6px;">
            <span>The quick brown fox jumps over the lazy dog</span>
        </span>
    </span>
 </div>

Everything is working great here until the next scenario :

3.I hover out the div, i call this code which will destroy the instance.

$("#content_id").attr("contenteditable", false);
CKEDITOR.instances[content_id].destroy();

4.I double click again the div and I initialize again using the code above CKEDITOR.inine( content_id ) and now the the html will be like this

<div id="mycontent" contenteditable=true>
    <span>The quick brown fox jumps over the lazy dog</span>
</div>

The div is back to its original state and the spans with style letter-spacing and line-height is removed.

Anyone experienced something like this?

See this: docs.ckeditor.com/#!/guide/dev_advanced_content_filter — Reinmar

Bogz Bogz · Accepted Answer · 2013-12-15T15:19:50

After hours of trial and error, thanks to Reinmar who gave me this docs : http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter and led me to here http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-allowedContent

Everything is working great now.

From

$("#content_id").attr("contenteditable", true);
ckeditor_instance = CKEDITOR.inline( content_id );

To

$("#content_id").attr("contenteditable", true);
ckeditor_instance = CKEDITOR.inline( content_id, {
  allowedContent : true
});

It works like a charm and im not sure yet why. I just set the allowedContent to true since in documentation it says :

true – will disable the filter (data will not be filtered, all features will be activated)

Hopefully there will be no side effects for this.

CKEditor 4 nested span elements gets removed after initializing inline editing

1 Answers