Here is the scenario. I have the following code within my CKeditor:
<div class="drag">
<span style="font-size:11px;">
<span style="font-family:aladin;">
<span style="color:#FF0000;">Tithes/Offering</span>
</span>
</span>
</div>
When I choose a Font Family, Font Size, or Color, the values rotate out of the <SPAN> as expected. However, if I use CSS to apply a "DISPLAY: BLOCK" to the <SPAN> tag, and then choose various options from the dropdown, I end up getting duplicated tags, such as:
<div class="drag">
<span style="font-size:11px;">
<span style="font-family:aladin;">
<span style="color:#FF0000;"></span>
<span style="color:#008000;"></span>
<span style="color:#B22222;">Tithes/Offering</span>
</span>
</span>
</div>
If I switch back to either "INLINE" or "INLINE-BLOCK", everything works fine. However, our design requirements require that the <SPAN> tags be block elements. I did try using CKEDITOR.CONFIG to change the generated <SPAN> tags to <DIV> tags (thus achieving block-element status), but then I could only choose a Font Family, Font Size, OR Color, as each <DIV> was being replaced by the other.
I also confirmed the behavior using the DEMO site at (http://ckeditor.com/demo#full)....
Please help!!!!
You cannot set display to
You cannot set display to "block" for spans. It's too strong change of the content representation. CKEditor is not a website builder - it's an web content editor and spans are meant to be inline elements, not part of layout.
Piotrek (Reinmar) Koszuliński
CKEditor JavaScript Developer
--
CKSource - http://cksource.com
--
Follow CKEditor on: Twitter | Facebook | Google+
Hi Piotrek,
Hi Piotrek,
Thanks for the reply. It turns out that this happens even if the SPAN tag is inline. For example if I add a CSS rule to remove the margins from the <P> element, it keeps duplicating <P> tags. So basically I cannot assign any CSS to <P> or <SPAN> tags without CKEDITOR duplicating those tags, instead of replacing the exisiting values.
How would I go about removing the margins from the <P> tag? I tried adding the rule to contents.css, but it still reproduced the tags.
Thanks,
-Jay
Update
OK, I've tried using CONTENTS.CSS, fontSize_Style, and ExtraCSS in CKEDITOR.CONFIG - any solution I try will not work. If I assign any CSS rule whatsoever to the <P> or <SPAN> tags, I get the duplication issue. I'm assuming this is a bug, since if I assign additional CSS through CKEDITOR.CONFIG, the font size, style, and color buttons should recognize this fact and work properly.
PLEASE HELP!!!!