13

Eu quero deixar "sortable" 2 ou mais div's com um CKeditor populado com html, porém ao fazer isso o html do CKeditor perde o conteúdo e o espaço de edição fica bloqueado.

Segue fiddle: http://jsfiddle.net/B4yGJ/256/

HTML

<div id='e'>
    <div id='e1'>
        <textarea id="editor1"></textarea>
    </div>
    <div id='e2'>
        <textarea id="editor2"></textarea>
    </div>
</div>

JS, dentro do ready

CKEDITOR.replace('editor1');

CKEDITOR.replace('editor2');

$("#e").sortable();
0

2 Respostas 2

12

Solução B

2014-11-11

Efetivamente, o que acontece é que a iframe é automaticamente descarregada quando a estamos a arrastar porque durante o arrastamento ela é desanexada do DOM.

Assim sendo, salvo o previamente sugerido, temos que fazer uso de uma solução que não use iframe.

CKeditor Plugin: Div Editing Area

Com o plugin "Div Editing Area" conseguimos contornar o problema pois o mesmo não usa uma iframe mas sim edição inline, o que no permite dispensar da manipulação da iframe antes e depois de anexada ao DOM por parte do ato de ser arrastada:

Este plugin utiliza um elemento <div> (em vez do elemento <iframe> tradicional) como a área editável no criador themedui. Muito semelhante a edição inline, beneficia-se permitindo que o conteúdo do editor herde os estilos de página de acolhimento.

$(document).ready(function(){

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

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

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

Curiosamente, o teu problema está reportado como Bug no CKeditor Ticket #11857 que foi entretanto fechado como "inválido" dado o problema estar na forma como a iframe é gerida no DOM por parte dos navegadores e não no CKEditor. A recomendação oficial é a forma que já havia sugerido, mas em alternativa este plugin sobre o qual agora escrevi também serve como solução.


Solução A

2014-11-06

Dá-me ideia que alguma alteração é feita no DOM no decorrer do arrastamento do elemento e a instância do CKEditor é de alguma forma corrompida.

Lidar com o problema

Isto não o explica o problema que tens, mas apresenta uma forma de lidar com o mesmo:

Ver exemplo no JSFiddle

CKEDITOR.replace('editor1');
CKEDITOR.replace('editor2');

var $textareaTemplate = $('<textarea/>');

var textareaId = '',
    CKvalue    = '';

$("#e").sortable({
    activate: function( event, ui ) {
        var $textarea = $(ui.item).find('textarea'),
            $userMsg  = $(ui.item).find('.while-drag');

        textareaId = $textarea.attr("id");

        CKvalue = CKEDITOR.instances[textareaId].getData();
        CKEDITOR.instances[textareaId].destroy();
        $textarea.remove();
        $userMsg.show();
    },
    update: function( event, ui ) {

        $(ui.item).find('.while-drag').hide();
        $(ui.item).append($textareaTemplate.attr("id",textareaId));

        CKEDITOR.replace(textareaId);
        CKEDITOR.instances[textareaId].setData(CKvalue);
    }
});

A explicar

  • Instanciar o(s) CKEditor como já fazias:

    CKEDITOR.replace('editor1');
    
    CKEDITOR.replace('editor2');
    
  • Variáveis globais para guardar dados e o template da área de texto:

    // Template da textarea e seus atributos (se aplicavel)
    var $textareaTemplate = $('<textarea/>');
    
    
    var textareaId = '', // para guardar a referencia à instancia do CKEditor
        CKvalue    = ''; // para guardar o valor que a instancia do CKEditor contém
    
  • Instanciar o sortable com dois métodos:

    O método activate( event, ui ) é chamado quando o arrastamento começa em determinado elemento da lista ordenável.

    O método update( event, ui ) é chamado quando a lista é atualizada, algo que acontece após o arrastamento ter terminado e as posições de DOM terem sido alteradas.

    $("#e").sortable({
      activate: function( event, ui ) { /* ao iniciar */ },
      update: function( event, ui ) { /* ao terminar */ }
    });
    
  • Guardar o que precisamos ao iniciar o arrastamento:

    activate: function( event, ui ) {
    
        var $textarea = $(ui.item).find('textarea'),     // localizar a textarea
            $userMsg  = $(ui.item).find('.while-drag');  // localizar mensagem ao utilizador
    
        // Guardar ID para identificar a instância do CKEditor
        textareaId = $textarea.attr("id"); 
    
        /* Recolher o valor atualmente presente na instância do CKEditor
         * que corresponde ao ID recolhido em cima.
         */
        CKvalue = CKEDITOR.instances[textareaId].getData();
    
        // Destruir a instancia do CKEditor neste elemento.
        CKEDITOR.instances[textareaId].destroy();
    
        // Remover do DOM a textarea
        $textarea.remove();
    
        // Apresentar mensagem ao utilizador
        $userMsg.show();
    }
    
  • Repor o que foi guardado ao terminar o arrastamento:

    update: function( event, ui ) {
    
        // Esconder mensagem
        $(ui.item).find('.while-drag').hide();
    
        // Colocar template da textarea com o ID recolhido
        $(ui.item).append($textareaTemplate.attr("id",textareaId));
    
        // Nova instancia do CKEditor para o ID recolhido 
        CKEDITOR.replace(textareaId);
    
        // Passar valor que o CKEditor tinha de volta para a área de edição
        CKEDITOR.instances[textareaId].setData(CKvalue);
    }
    

3
  • isso já me dá uma direção muito boa na solução do problema. O seu exemplo ainda tem um bug, quando eu troco de lugar outras vezes o CKeditor acaba se perdendo. Vou tentar investigar isso aqui. Caso você tenha ideia do que pode estar acontecendo por favor atualize aqui!
    – Joao Paulo
    Commented 6/11/2014 às 16:43
  • Hmmm... Com Firefox a correr em Linux consigo andar com o CKEditor para cima e para baixo múltiplas vezes sem perder o conteúdo... Oportunamente irei analisar melhor este problema e atualizo a resposta!
    – Zuul
    Commented 6/11/2014 às 16:45
  • @JoaoPaulo Muito provavelmente o problema acontece quando você clica em algo dentro do próprio editor e arrasta. Veja no final da minha resposta para uma explicação e possível solução. A propósito, minha sugestão é bastante parecida com esta, só muda a forma de fazer. E em ambos os casos, ao se mover o elemento perde-se o histórico de edições (undo e redo). Talvez se perca mais coisas também, não sei... Se a solução B dessa resposta funcionar (i.e. sem precisar destruir e recriar o editor), ela deve ser a melhor opção.
    – mgibsonbr
    Commented 11/11/2014 às 9:09
5
+350

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.

Em primeiro lugar, usa-se a opção clone para que o elemento sendo arrastado não seja a própria div, mas um clone dela (isso evita que o elemento seja removido do DOM ao iniciar a ordenação, mas sim somente escondido):

$("#e").sortable({
    helper:"clone",

Dessa forma, o helper ainda se parecerá com o editor sendo movido - só que vazio. O elemento original estará ainda no DOM, intacto, mas invisível.

Como o helper é uma cópia exata do elemento a ser movido, ele também possui um iframe. Pode-se popular esse iframe com uma cópia dos dados do próprio editor, para ele se parecer mais com o elemento original. O código abaixo é só um exemplo, provavelmente é possível melhorar mais (a aparência fica bem parecida, salvo por alguns detalhes na fomatação):

    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);

Em seguida, destrói-se o editor no início do processo de ordenar. Como ele está escondido, nenhuma alteração visual é percebida:

        CKEDITOR.instances[id].destroy(false);
    },

Por fim, ao soltar, recria-se o editor:

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

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.

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

5
  • Ficou ótimo no Chrome. Porém no IE ele não encontra toElement/querySelector. O erro é o seguinte: Unable to get property 'querySelector' of undefined or null reference. Com isso no IE(10/9), assim q tento arrastar o CKEditor some.Esse toElement pode ser substituido por outra coisa para não vir null/undefined?
    – Joao Paulo
    Commented 11/11/2014 às 11:18
  • Exemplo: jsfiddle.net/B4yGJ/262
    – Joao Paulo
    Commented 11/11/2014 às 11:21
  • 1
    @JoaoPaulo Eu inicialmente tentei fazer sem usar jQuery, mas pode-se substituir x.querySelector(y) por $(x).find(y)[0]. Quanto ao toElement, vou investigar, pensei em usar simplesmente target mas estranhamente não funcionou (o engraçado é que se você acessar a variável global event o target está certo, mas no parâmetro event que o jQuery usa no callback o target está diferente...). Quando tiver uma resposta eu atualizo.
    – mgibsonbr
    Commented 11/11/2014 às 19:04
  • @JoaoPaulo Atualizei a resposta pra usar jQuery o tempo todo (em vez de querySelector) e consultei o evento original (um MouseEvent) em vez do evento jQuery - para garantir que o target fosse mesmo o elemento clicado (e não a área inteira). Além é claro de corrigir o bug quando se arrasta o conteúdo do iframe. Não tenho como testar no IE(10/9), mas o último exemplo funcionou no IE11, FF, Chrome, Safari e Opera.
    – mgibsonbr
    Commented 13/11/2014 às 4:30
  • Vou testar hoje e dou um feedback!
    – Joao Paulo
    Commented 14/11/2014 às 16:02

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .