Hello
I use the inline-CKEditor and I have problems with the default behaviour of text-formatting.When I enter two lines and format the first line with a higher text-size (for example: 24px, default is 12px) and jump then with the cursor manually to the end of line 1 (that's important) and press enter to get a line break, I get the following HTML-Code (I added the line-height by myself by the way):
<span style="font-size:24px; line-height:24px">zeile1<br></span><br><span style="font-size:12px;line-height:12px;">zeile2</span><br>
Now I have a line break with a line-height with 24px - that's what I want. But if I close now the CKEditor and reload the text again, I get the following structure:
<span style="font-size:24px; line-height:24px">zeile1</span><br><br><span style="font-size:12px;line-height:12px;">zeile2</span><br>
The br tag jumped out of the span element and the line-height automatically jump to my default line-height of the root element, which is 12 px in that case. As a result the text get closer and the space between the lines is not as before (see screens). I want to avoid that the CKEditor put the br element outside the span tag. I already google a lot but haven't found something. I read the CKEditor format the code by rendering and I tried to fix the problem by setting config.FormatSource = false, but it doesn't work -.- I am really frustated at the moment and I hope that somebody could help me. Thanks in advance, if you should more information write please!
I configured the CKEditor with the following options:
CKEDITOR.editorConfig = function( config ) {
config.enterMode = CKEDITOR.ENTER_BR;
config.forcePasteAsPlainText = true;
config.allowedContent = false;
config.FormatSource = false;
};
CKEditor abides by W3C rules
CKEditor abides by W3C rules and I think you're not supposed to have <br> tags in <span> tags. There's really nothing we can do about that.
Customer and Community Manager, CKSource
Follow us on: Facebook, Twitter, LinkedIn
If you think you found a bug in CKEditor, read this!
Thanks for your answere.
Thanks for your answere. CKEditor places the <br> tags in edit mode within the <span> element, when I change the font-size and press enter at the end of the line and change the position of the <br> tag after rendering outside the <span> element. So the result is different. I debugged CKEditor now and deactivated dataProcessor.toHtml() and dataProcessor.toDataFormat() - now it works. The <br> tag is now also after rendering within the span tag and the line-height is now the same between edit and snapshot.
@sebstefanov
@sebstefanov
According to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span, the span element accepts any "Phrasing content" as content (children).
Information on Phrasing Content can be found at https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content.
Specifically, the <br> tag is included as the list of acceptable elements that can be within a <span> tag.
We are experiencing the same issue as above, where a <br> placed within a <span> that has a larger font size than the rest of the document gets ripped outside of the span, changing the line-height of it and altering the content flow. However, we do not have the immediate ability to turn off HTML processing to resolve this.
@tomprogramming: You're of
@tomprogramming: You're of course right. There's no reason from HTML's POV to move <br> tags outside of <span> tags. However, there may be some hard to explain reasons why CKEditor wants to move <br>s from the end of inline elements outside of them (note that <br>s in the middle of inline elements are not extracted). This may be related to so called bogus brs, but I would need to investigate that. Perhaps this may be changed, but when it's related to bogus brs it's never an easy and safe change.
Piotrek (Reinmar) Koszuliński
CKEditor JavaScript Developer
--
CKSource - http://cksource.com
--
Follow CKEditor on: Twitter | Facebook | Google+