start:function(event, ui) {
// Encontra o id do textarea original (melhor usar classes...)
while ( event.originalEvent )
event = event.originalEvent;
var id = $(event.toElementtarget).querySelectorclosest("#e1, #e2").find("textarea")[0].id;
// Acha os dados do editor e os copia pro helper
var copia = CKEDITOR.instances[id].getData();
ui.helper.find("iframe").contents().find("body").html(copia);
stop:function(event) {
while ( event.originalEvent )
event = event.originalEvent;
var id = $(event.toElementtarget).querySelectorclosest("#e1, #e2").find("textarea")[0].id;
CKEDITOR.replace(id);
}
});
Exemplo no jsFiddleExemplo no jsFiddle. Um problema desse método é que após se destruir e recriar o editor perde-se todo o histórico de revisões (i.e. undo e redo), bem como qualquer "estado" que o editor guardasse antes da destruição. Infelizmente não tenho nada a sugerir nesse sentido...
Aviso: Cabe notar que usar o sortable
dessa forma é sujeito a bugsum problema de UX: se você clicar na área azul/vermelha e arrastar, tudo ok, mas se você clicar por exemplo em um dos botões do editor e acidentalmente mover o mouse, ele inicia uma ordenação (o que pode ser meio irritante pro usuário). Pode-se adaptar o método acima para que ao menos não "trave" quando isso acontecer, substituindo-se a seleção do id
por:
var id = $(event.toElement).closest("#e1, #e2")[0].querySelector("textarea").id;
Mas o ideal mesmoUm meio de evitar isso seria usar um handle
para restringir em que parte(s) da div
se pode arrastar o elemento - em vez da div
inteira. ExemploExemplo. Ou talvez você consiga algo interceptando o clique na fase de captura e evitando que o drag se inicie quando o mesmo ocorrer dentro do iframe
(não sei como fazer isso usando o sortable
, não existe nenhum método "beforeStart" ou algo desse tipo...).