编辑：

Question

我有一段HTML，我想用CKEditor编辑，但有2个不同的部分。

理想情况下，我希望我的HTML看起来像：

<div class="page-header">
  <h1>
    <span>Heading</span>
    <small>Subheading</small>
  </h1>
</div>

其中子标题将显示在与标题相同的行上，并且每个子标题可单独编辑。如果没有启用CKEditor，这看起来很好。

一次尝试是破解编辑器以启用span和小标签：（Enable CKEditor4 inline on span and other inline tags）

CKEDITOR.disableAutoInline = true;
CKEDITOR.dtd.$editable.span = 1;
CKEDITOR.dtd.$editable.small = 1;
$("[data-allowed-formating='all']").ckeditor();

http://jsfiddle.net/OzzieOrca/PCH9z/1/

这大部分都有效但是如果你双击Header（选择所有内容）并开始输入，它会删除子标题，直到你刷新页面才能恢复它

我尝试使用<div style="display: inline">而不是小和span但是当实例化CKEditor时，它会更改div的样式，并且副头会降低到标题下方。

我会尝试查看是否还有其他任何我可以使用CKEditor做的事情，或者看看我是否有任何其他HTML布局或样式构思，但任何建议都会受到赞赏。

（我和TinyMCE有同样的问题，所以我尝试了CKEditor，我觉得我更喜欢它，所以我决定继续使用它，但我仍然有同样的问题）

编辑：

我终于尝试了这个：

<div class="page-header">
  <h1 class="pull-left">Header</h1>
  <h1 class="pull-left">
    <small class="padding-left">Subheader</small>
  </h1>
  <div class="clearfix"></div>
</div>

然后意识到这不会包装子标题但只是将它移动到一个新行，如果它太长。我提交了这个错误报告：http://www.tinymce.com/develop/bugtracker_view.php?id=6354，其中包含了我想要做的事情和不起作用的示例http://jsfiddle.net/OzzieOrca/jKmZ7/

Answer 1

首先，确保编辑器不会将自身附加到<h1>元素。

如果方法正常，那么我建议在编辑期间将要编辑的元素包装在块元素中，并在编辑停止时恢复DOM。

我不知道为什么CKEeditor可以区分内联元素和块元素，但很可能作者从未想过有人可能只想编辑块的一部分。

如何在同一行上有2个CKEditor实例而不会导致问题？

编辑：

1 个答案: