CKEditor inline editor on elements within an iframe

Question

In an application I have content editable elements within an iframe and want to apply inline CKEditor to those elements. It works except when I scroll the iframe the CKEditor toolbars do not scroll with it. Is there a special flag or some way to get the toolbars to scroll with the iframe contents rather than with the parent window? Also I want to avoid adding the CKEditor script into the iframe.

Worth mentioning our discussion on CKEditor's bug tracker: dev.ckeditor.com/ticket/11003 — Reinmar
Can you share the code you used to get the inline editor to work with elements within an iframe? I'm having issues with that — jetcom

minlare minlare · Accepted Answer · 2014-07-30T16:14:10

You can achieve this by wrapping the iframe with a container element that is the same size as the iframe and has relative positioning.

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

Then you move the position of each ckeditor panel into that container element and the absolute positioning values will work.

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

CKEditor inline editor on elements within an iframe

1 Answers