插入

Question

我对CKEDITOR的最新版本有以下问题。

复制步骤

1. 打开以下链接 http://sdk.ckeditor.com/samples/fullpreset.html
2. 切换到CKEditor中的源代码模式
3. 插入以下代码

<h3 class="foo title">title</h3>
<div class="foo content">Lorem ipsum dolor sit amet, consetetur ...</div>

1. 切换回所见即所得模式
2. 将鼠标放在lorem ipsum ... text
后面
3. 使用“enter”键添加换行符
4. 按编辑器中的“ul”图标生成ul列表，并将一些内容添加到第一个列表项。
5. 切换回源代码模式
6. 现在你看到UL列表“跳出”了div元素

<h3>title</h3>
<div class="foo content">Lorem ipsum dolor sit amet, consetetur ...</div>
<ul>
<li>asdfsadf</li>
</ul>

预期结果

ul列表应保留在div中，不要跳出它。

实际结果

插入的ul列表跳出div。

Answer 1

我从CKEDITOR首席开发人员（Piotrek Koszuliński）获得了此问题的解决方案。

<强> Here his answer on GitHub

...

我担心这不会像你期望的那样奏效。至少，不是默认情况下。您希望编辑器中的一个非常特殊和特定的行为接近＆＃34;网页构建＆＃34;，而CKEditor专注于内容创建。

那么，编辑所遵循的规则是什么？内容由块组成。段落是块，列表是块，标题是块。你不能在彼此之间嵌套块。您无法在标题内的段落或列表中进行标题。在某些情况下，CKEditor 4会违反此规则（您可以在列表项中创建标题），但这会让我们感到非常头疼。

在您的情况下，两个div都被理解为块。为什么？因为它们包含文字。分区很棘手。有些人希望它们的行为类似于段落（因此div输入模式），有些人则认为它们是块内容的容器。

CKEditor 4试图实现这两个，所以它需要使用我提到的启发式来区分这两种情况。

因此，如果您希望自己的行为像容器，而不是块，请将段落放入其中。 E.g：

<div class="foo content"><p>foo</p></div>

现在，如果单击列表按钮，列表将在div内创建，而不是在外部。

但是，我真的建议你将所有这些分成两个独立的编辑器。分别标题和内容。不建议您使用CKEditor的方式，因为它会导致很多问题。使用它很好，你将有更好的控制和结果。