Tag issue

[Alexey]

Hello!

I have an issue with CKEditor. When I insert ans save HTML source code into information page CKedtor change original HTML.

For instance:

Original code:

<div class="cms-block xs-100 sm-50 md-50 lg-25 xl-25">
                <span class="block-content" style="height: 214px;">
                        <div class="block-icon block-icon-left" style="background-color: rgb(235, 88, 88); width: 30px; height: 30px; line-height: 30px; border-radius: 50%"><i style="margin-right: 5px; color: rgb(255, 255, 255); font-size: 20px" data-icon=""></i></div>
                        <div class="editor-content" style="text-align: left"> <h3>My text here</h3>

<ul>
	<li>My text here</li>
	<li>My text here</li>
	<li>My text here</li>
	<li>My text here</li>
	<li>My text here</li>
	<li>My text here</li>
	<li>My text here</li>
</ul></div>
        </span>
    </div>
</div>
</div>

Code after insert and save:

<div class="cms-block xs-100 sm-50 md-50 lg-25 xl-25">
<div class="block-icon block-icon-left" style="background-color: rgb(235, 88, 88); width: 30px; height: 30px; line-height: 30px; border-radius: 50%">&nbsp;</div>

<div class="editor-content" style="text-align: left">
<h3><span class="block-content" style="height: 214px;">My text here</span></h3>


<span class="block-content" style="height: 214px;">My text here</span>

<span class="block-content" style="height: 214px;">My text here</span>

<span class="block-content" style="height: 214px;">My text here</span>

<span class="block-content" style="height: 214px;">My text here</span>

<span class="block-content" style="height: 214px;">My text here</span>

<span class="block-content" style="height: 214px;">My text here</span>

<span class="block-content" style="height: 214px;">My text here</span>


</div>
</div>
</div>
</div>

Thanks for prompt reply,

Alexey

[Jakub Ś]

First of all editor doesn't have anything to do with saving data. This can be considered editor issue when you see it when switching to source and back.

Now let's get back to your code changes:

1. You can't wrap div into span. The span is not a container and should not be used as such. Editor will not allow that as it validates tags against the spec. In this case you need to change your code (span to div for example) - <span class="block-content" style="height: 214px;"> .

2. Lists got removed. You most likely don't have list plugin in your editor and you have ACF enabled. If that is the case you need to allow lists. You need to report them to ACF - config.extraAllowedContent = 'ul ol li'.

3. This container span is also causing another issue. Using this tag as container is invalid thus CKEditor tries to fix it and in result it wraps content in all inner tags into spans. We have this already reported.

4. I can see you are using i for icons. <i style="margin-right: 5px; color: rgb(255, 255, 255); font-size: 20px" data-icon=""></i>. Unfortunatelly CKEditor doesn't allow empty inline tags because they have no visual representation (This is by design). You can either fill it with   or use protectedSource for it - ​http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-protectedSource. Unfortunately there is not much else you can use in this case.

To summarize I don’t see editor but rather HTML problems which you should fixed. Problem number 3 is the result of problem 1 and is already reported.

To learn more about ACF, please see:
​http://docs.ckeditor.com/#!/guide/dev_acf
​http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter
​http://docs.ckeditor.com/#!/guide/dev_disallowed_content
​http://docs.ckeditor.com/#!/api/CKEDITOR.filter-method-addTransformations
​http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-allowedContent
​http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-extraAllowedContent

[Jakub Ś]

Edit:

2. I have rechecked the problem and it doesn't happen when ACF is enabled. When ACF is on it will remove invalid span tag.

3. Since point 2 proves that you have ACF disabled, I'm not sure why lists get removed. Perhaps something on server-side filters these lists?

4. There is another solution you can use for empty i tags. It requires ACF being enabled and dtd modification. Try using below to preserve them.

CKEDITOR.dtd.$removeEmpty['i'] = false; 
var editor = CKEDITOR.replace( 'editor1', {
	coreStyles_italic : { element: 'i', overrides: 'em' },
	extraAllowedContent : 'i[*]{*}(*)'
});