CKEditor 内联编辑器在 iframe 中的元素上

Question

在一个应用程序中，我在 iframe 中有内容可编辑元素，并希望将内联 CKEditor 应用于这些元素。它可以工作，除非当我滚动 iframe 时，CKEditor 工具栏不会随之滚动。是否有特殊标志或某种方法可以使工具栏随 iframe 内容而不是父窗口滚动？另外我想避免将 CKEditor 脚本添加到 iframe 中。

Answer 1

您可以通过使用与 iframe 大小相同且具有相对定位的容器元素包装 iframe 来实现此目的。

<div id="iframe-wrapper">
    <iframe>
        <body>
            <div contenteditable></div>
        </body>
    </iframe>
</div>

然后将每个 ckeditor 面板的位置移动到该容器元素中，绝对定位值将起作用。

var el = $('iframe').contents().find('[contenteditable]');
el.ckeditor();
el.ckeditorGet().on('instanceReady', function(){
    $('body > .cke_float').appendTo('#iframe-wrapper');
});