4

I have 2 ckeditors in the same container (a div) like below (textarea will be replaced by my js code with ckeditor):

<div id="container">
    <textarea id="cke0"></textarea>
    <textarea id="cke1"></textarea>
</div>

It's works great, but I have an issue when I let the container div be sortable (with jquery ui sortable) like :

$("#container").sortable();

I lost the content of the editor and the editor is no more editable and accessible. I can't focus the editor. I check in the debugger and the editor (the iframe) is still present in the DOM.

Anyone had this issue ?

thanks for replies Bastien

bastien
  • 209
  • 2
  • 14
  • I'm not privy to the specifics of what is happening here, but you may have to re-initialize the CKEditor after the dragging & dropping. Not sure, I guess we'll see – Pekka Jun 15 '12 at 17:59
  • 1
    I found the answer on SO : http://stackoverflow.com/questions/3379653/ckeditor-freezes-on-jquery-ui-reorder – bastien Jun 15 '12 at 18:03

2 Answers2

4

I used extra plugin 'divarea' (it replaces iframe by div) and 'cancel' options in sortable.

Something like this:

CKEDITOR.replace('cke0',{extraPlugins: 'divarea'});

$('#container').sortable({items: 'textarea',cancel: '.cke_inner'});
ZdenekD
  • 246
  • 2
  • 6
  • Perfect, thank you! The `cancel` option was my missing piece. Now I finally can remove all my "restore CKEditor if dragged"-JavaScript code that's been haunting me for years. – flu Jun 19 '15 at 08:57
  • Very nice! Thanks! ( the 'items' part is not necessary, and don't forget to install divarea first, maybe with CKEDITOR.plugins.addExternal( 'divarea', '/my-js-folder/ckeditor_plugins/divarea/', 'plugin.js' ); if you use a CDN for ckeditor ) – Weber Antoine Jan 05 '16 at 12:34
1

I'm having pretty much the exact same issue. I found this link which is basically the same thing (I believe).

How to prevent an iframe from reloading when moving it in the DOM

Community
  • 1
  • 1
WhiteRaven
  • 21
  • 3