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

Question

考虑以下标记:

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

当用户选择整个文本 block (例如使用 [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] 选择整个文本 block 并将“Comic Sans MS”字体应用到选区
3. 使用 [Source] 检查生成的标记并查看空段落是否缺少字体样式
4. 切换回编辑模式并在其中一个空段落中键入，新文本确实使用默认字体

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

Answer 1

The problem here is after user has explicitly applied font to the whole block they expect the whole block to be in that font, but when they use cursor and navigate to one of the empty paragraphs and start typing there it's a different font altogether

所以问题实际上是不同的——它与数据无关，而是与这些没有在编辑器中保留样式的空 block 有关。这个somewhere有票，但解决方案并不简单。问题是，当您将样式应用于空 block 时，会创建此结构(检查编辑器的 DOM):

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

<br>有使该段落可见的方法-这就是所谓的虚假 br。否则，该段落的高度将为 0。

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

如果您在空选择上应用样式并移动您的插入符号，则会发生同样的情况 - 那里仍然有一个空的内联元素，但您将无法将您的插入符号移回它。

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

如果你想尝试实现一个可以解决最常见情况的 hack，那么它应该像这样工作:

1. 观察选择变化 ( editor#selectionChange )。
2. 如果选择被折叠并且它被放置在一个空 block 中(请注意伪造的 brs)并且有一个空的内联元素，将插入符号移到那里。
3. CKEditor 的选择引擎能够将插入符号放置在一个空的内联元素中(Webkit 和 Blink 中的 native 实现无法做到这一点)。