In font formatting, CKEditor does not apply to blank paragraphs
Consider the following markup:
<p>spaceflight</p>
<p> </p>
<p> </p>
<p>spaceflight</p>
When the user selects an entire block of text (for example, using [Ctrl + A]) and applies font formatting in CKEditor, the resulting markup looks like this:
<p><span style="font-family:comic sans ms,cursive">spaceflight</span></p>
<p> </p>
<p> </p>
<p><span style="font-family:comic sans ms,cursive">spaceflight</span></p>
i.e. the font is not applied to empty paragraphs.
Steps to reproduce the problem:
- enter multiple lines of text, use [Enter] to insert blank paragraphs between lines
- use [Ctrl + A] to select the entire block of text and apply the "Comic Sans MS" font to the selection
- use [Source] to check the resulting markup, and see that there is no font style in empty paragraphs
- go back to edit mode and type inside one of the blank paragraphs, the new text does indeed use the default font
Is there any known workaround to allow CKEditor to apply formatting to blank paragraphs within the current selection?
source to share
The problem is that after the user has explicitly applied the font to the entire block, who expects the entire block to be in that font, but when they use the cursor and go to one of the empty paragraphs and start typing there,
So the problem is actually different - it's not data related, but with these empty blocks not keeping the style inside the editor. There's a ticket for this somewhere , but the solution is not trivial. The problem is that when styling an empty block this structure is created (check the editor's DOM):
<p><strong></strong><br /></p>
<br>
in order to make a paragraph visible - this is the so-called dummy br. Otherwise, the paragraph would have a height of 0.
Now when you try to position your caret (using your mouse or keyboard), the browser finds an empty strong element, which is 0x0, and a paragraph, which has non-zero width and height. Where does the browser put your carriage? In paragraph.
The same situation occurs if you style an empty selection and move your caret - there is still an empty inline element in there, but you won't be able to move it back.
There is even more than one way to get around this. Unfortunately, none of them are trivial.
If you want to try and implement a hack that should solve the most common cases, then it should work like this:
- Watch for changes to the selection (
editor#selectionChange
). - If the selection is collapsed and placed in an empty block (a dummy bb, of course), and there is an empty inline element there, move the caret there.
- CKEditor's picker is capable of placing caret in an empty inline element (native implementations in Webkit and Blink cannot do this).
source to share