0

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

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

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

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

一种尝试是破解编辑器以启用跨度和小标签：（在跨度和其他内联标签上启用 CKEditor4 内联）

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

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

这通常有效，但如果您双击标题（选择所有内容）并开始输入，它会删除副标题，并且在刷新页面之前您无法取回它

我尝试使用<div style="display: inline">而不是 small 和 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/

4

1 回答 1

1

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

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

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

于 2013-09-27T08:46:08.467 回答