在CKEditor中，字体格式不适用于空段落

Question

考虑以下标记：

<p>spaceflight</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>spaceflight</p>

当用户选择整个文本块（例如使用[Ctrl + A]）并在CKEditor中应用字体格式时，生成的标记是这样的：

<p><span style="font-family:comic sans ms,cursive">spaceflight</span></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><span style="font-family:comic sans ms,cursive">spaceflight</span></p>

即。字体不适用于空段落。

重现问题的步骤：

1. 键入几行文字，使用[Enter]在行之间插入空段落
2. 使用[Ctrl + A]选择整个文本块并将“Comic Sans MS”字体应用于选择
3. 使用[Source]检查生成的标记，并查看空段落缺少字体样式
4. 切换回编辑模式并在其中一个空段落中键入，新文本确实使用默认字体

是否有任何已知的解决方法允许CKEditor将格式应用于当前选择中的空段落？

Answer 1

  

这里的问题是用户明确地将字体应用到他们希望整个块都是该字体的整个块之后，但是当他们使用光标并导航到其中一个空段并开始在那里输入时它就会出现问题。完全不同的字体

所以问题实际上是不同的 - 它与数据无关，而是与这些空块无法在编辑器中保留样式。这是somewhere的一张票，但解决方案并非无足轻重。问题是当你将样式应用于空块时，会创建这个结构（检查编辑器的DOM）：

<p><strong></strong><br /></p>

<br>用于使段落可见 - 它被称为伪造的br。否则，段落的高度为0。

现在，当您尝试将插入符号放在那里（使用鼠标或键盘）时，浏览器会找到一个空的强元素，即0x0和一个宽度和高度均为非零的段落。浏览器放置你的插入符号？在段落中。

如果你在一个空的选择上应用样式并移动你的插入符号也会出现同样的情况 - 那里仍然是一个空的内联元素，但你不能将你的插入符号移回它。

可以解决这个问题，甚至不止一种方式。不幸的是，没有一件是微不足道的。

如果你想尝试实现一个应该解决最常见案例的黑客攻击，那么它应该像这样工作：

1. 观看选择更改（editor#selectionChange）。
2. 如果选择被折叠并且被放置在一个空块中（假想brs）并且有一个空的内联元素，请在那里移动插入符号。
3. CKEditor的选择引擎能够将插入符号放在空的内联元素中（Webkit中的本机实现和Blink无法做到这一点）。