Skip to main content
replaced http://pt.stackoverflow.com/ with https://pt.stackoverflow.com/
Fonte Link

Conforme a resposta do Zuula resposta do Zuul, o problema ocorre ao remover o iframe do DOM. Por essa razão, minha sugestão é destruir o editor antes da ordenação (fazendo com que ele volte a ser um simples textarea) e recriá-lo após a mesma.

Um 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. Exemplo. Ou talvez você consiga algo interceptando o clique na fase de capturafase 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...).

Conforme a resposta do Zuul, o problema ocorre ao remover o iframe do DOM. Por essa razão, minha sugestão é destruir o editor antes da ordenação (fazendo com que ele volte a ser um simples textarea) e recriá-lo após a mesma.

Um 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. Exemplo. 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...).

Conforme a resposta do Zuul, o problema ocorre ao remover o iframe do DOM. Por essa razão, minha sugestão é destruir o editor antes da ordenação (fazendo com que ele volte a ser um simples textarea) e recriá-lo após a mesma.

Um 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. Exemplo. 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...).

Fim da Recompensa com 350 pontos de reputação concedidos por Joao Paulo
adicionou 153 caracteres ao conteúdo
Fonte Link
mgibsonbr
  • 82,6mil
  • 22
  • 186
  • 334
    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...).

    start:function(event, ui) {
        var id = event.toElement.querySelector("textarea").id;

        var copia = CKEDITOR.instances[id].getData();
        ui.helper.find("iframe").contents().find("body").html(copia);
    stop:function(event) {
        var id = event.toElement.querySelector("textarea").id;
        CKEDITOR.replace(id);
    }
});

Exemplo 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 bugs: 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 mesmo seria usar um handle para restringir em que parte(s) da div se pode arrastar o elemento - em vez da div inteira. Exemplo. 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...).

    start:function(event, ui) {
        // Encontra o id do textarea original (melhor usar classes...)
        while ( event.originalEvent )
            event = event.originalEvent;
        var id = $(event.target).closest("#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.target).closest("#e1, #e2").find("textarea")[0].id; 

        CKEDITOR.replace(id);
    }
});

Exemplo 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 um 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).

Um 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. Exemplo. 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...).

adicionou 251 caracteres ao conteúdo
Fonte Link
mgibsonbr
  • 82,6mil
  • 22
  • 186
  • 334

Exemplo no jsFiddle. O único inconvenienteUm 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...

Outro pequeno inconveniente é o helper, que idealmente deveria ser uma cópia idêntica do conteúdo sendo movido. Não creio ser simples fazer isso com o editor que usa iframe (iframes são um pouco "chatos" de se trabalhar, devido a questões de segurança), mas talvez seja possível aprimorar o método de clonagem.

Exemplo no jsFiddle. O único inconveniente desse método é o helper, que idealmente deveria ser uma cópia idêntica do conteúdo sendo movido. Não creio ser simples fazer isso com o editor que usa iframe (iframes são um pouco "chatos" de se trabalhar, devido a questões de segurança), mas talvez seja possível aprimorar o método de clonagem.

Exemplo 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...

Outro pequeno inconveniente é o helper, que idealmente deveria ser uma cópia idêntica do conteúdo sendo movido. Não creio ser simples fazer isso com o editor que usa iframe (iframes são um pouco "chatos" de se trabalhar, devido a questões de segurança), mas talvez seja possível aprimorar o método de clonagem.

Fonte Link
mgibsonbr
  • 82,6mil
  • 22
  • 186
  • 334
Carregando