CKEditor：工具栏下拉菜单打开异常答案

【问题标题】：CKEditor: toolbar dropdowns open out of lineCKEditor：工具栏下拉菜单打开异常
【发布时间】：2017-01-31 07:58:12
【问题描述】：

我在我的网页上使用内联 ckeditor。除了模态之外，这在任何地方都可以完美地工作。发生的情况是，工具栏中的下拉菜单在单击时显示在工具栏其余部分上方 50-200 像素处。 ex 样式或字体选择。我不知道为什么！并且错误仅在此模式中，而不是在其他任何地方。有谁知道为什么？是CSS继承吗？是不是我在ckeditor渲染后在ckeditor上方渲染元素？

我的初始化如下所示：

<div class="text-and-toolbar">
   <div id="<%= UID %>-cktool" class="ckeditor-toolbar-div hidden"></div>
   <div class="text-field" id="<%= UID %>" data-fieldid="<%= FieldId %>">
   <div class="ckEditor read-only-content" contenteditable="true" id="<%= UID %>-textarea"><%= Content %></div>
</div>

var toolbar = self.$("#"+self.$(".text-field").attr("id") + "-cktool");
editor = (this.editor = CKEDITOR.inline(this.textarea[0],
{
      sharedSpaces:{
                     top: self.toolbar.attr("id")
      }
}));

config.js 中的工具栏：

config.toolbar =
[
    { name: 'clipboard', items: ['Cut', 'Copy', 'Paste', '-', 'Undo', 'Redo'] },
    { name: 'editing', items: ['Find', 'Replace', '-', 'SelectAll'] },
    { name: 'colors', items: ['TextColor'] },
    { name: 'insert', items: ['Table', App.currentUser.isSuperAdmin ? 'Image' : ''] },
    { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike', '-', 'RemoveFormat'] },
    { name: 'paragraph', items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'] },
    { name: 'links', items: ['Link', 'Unlink', 'Anchor'] },
    { name: 'plugin', items: ['SpellChecker', 'Scayt', 'Sourcedialog'] },
    { name: 'styles', items: ['Styles', 'Format', 'Font', 'FontSize'] }
];

更新：所以我想出了原因，但不知道如何解决它。模态有一个滚动条（正文内容比模态长）。当在浏览器中将内容编辑为与模态一样长时，它可以工作。

【问题讨论】：

标签： ckeditor ckeditor4.x

【解决方案1】：

修复：必须设置模态 css FROM

 position: absolute;

到：

 position: static;

【讨论】：