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.
2
-
2Worth mentioning our discussion on CKEditor's bug tracker: dev.ckeditor.com/ticket/11003Reinmar– Reinmar2013-10-17 11:45:33 +00:00Commented Oct 17, 2013 at 11:45
-
Can you share the code you used to get the inline editor to work with elements within an iframe? I'm having issues with thatjetcom– jetcom2014-07-12 01:49:38 +00:00Commented Jul 12, 2014 at 1:49
Add a comment
|
1 Answer
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');
});
3 Comments
georgephillips
Haven't tried it my self but does this work when the iframe is scrolled?
minlare
No, this will only work if the iframe height is fixed to the same height as the container. Although, I'm sure you could take the scroll of the iframe and work out that way, however you would also have to handle what happens when the element goes outside the iframe screen boundary.
minlare
@georgephillips Please would you mark this answer as correct