Losing Elements in CKEditor

Losing Elements in CKEditor

When adding styled break-lines to the text, the html parser removes the empty spans inside the paragraphs and therefore the break-lines loose their styles (height). The issue is in the onTagOpen function which checks if this type of element, when empty should be removed, and ignores the fact that the element might have attributes.

So, if you were to have the following in your page content, CKEditor would delete it!

<span style="line-height: 30px;"></span> test<br />

This is how CKEditor works by default - it removes empty inline styles.

The natural way would be wrapping text inside them . If you really want to use this techniques than the only thing I can suggest is using space inside span tags:

<span style="line-height: 30px;">&nbsp;</span> test<br />

This however will result in visible space before text so it’s not really recommended.

Another workaround (which is in accordance with CKEditor logic) is using one of the below:

<div style="height: 30px;"> test</div>
<p style="height: 30px;"> test</p>
<span style="line-height: 30px;">test</span>

NOTE: they all require you to have text inside tags.

Where Have My Classes and IDs Gone?

The default behaviour of CKEditor is to remove any class and id properties from the <P> and <DIV> elements.

If you are using these for nice things that a system like Bootstrap can give you then you are in trouble.

The following entries into the config.js file for the editor will cure this behaviour:

config.allowedContent = true;
config.extraAllowedContent = 'p(*)[*]{*};div[id];code(*)[*]{*}';

This page was last modified on Thursday, 23rd April 2015 at 12:57:06 by Gary Keeling. © 2022 GKWeb Design.

Categorised as: CKEditor

GK5 Footer

and whatever