CKEditor + Meteor doppelten Text beim Speichern und Löschen

Question

Ich habe diesen Code, um CKEditor inline bearbeiten zu verwenden. Das Problem ist, dass der Wiki-Text dupliziert wird, nachdem die Datenbank aktualisiert wird und gespült Client:

#wikiedit(contenteditable="true") 
     !{wikipage.text} 

Nach der Bearbeitung und Schließen des Editor-Bereich, ein Server-Befehl ausgeführt wird.

var e = CKEDITOR.instances.wikiedit, 
    save_timeout, 
    save_data = function() { 
     clearTimeout(save_timeout); 
     Meteor.call('wiki.update', {_id: wiki_id, text: e.getSnapshot()}) 
     }; 

e.on('blur', function() { 
    console.log('change event'); 

    clearTimeout(save_timeout); 
    save_timeout = setTimeout(save_data, 2000); 
}); 

Was auch immer ich es geben, wenn es aufgefrischt ist, in der Datenbank der Text <p>new text</p> und im CKEditor Element, der alte Text nicht entfernt wird. Der neue Text wird danach angehängt.

Putting-Code in einem Helfer Art hilft, aber die innerHTML dort ist bereits der alte + der gespülte Text. Aber es funktioniert nur, wenn der aktuelle Benutzer den Text geändert hat, sonst sind die Texte anders und ich kann nicht unterscheiden, wo die zweite Kopie beginnt.

Answer 1

Gelöst dies mit einem Helfer, der den Status des Editors überprüft.

Template.document.helpers({ 
    ck_deduplicate: function() { 
     var elt = document.getElementById('wikiedit'); 
     if (elt) { 
      elt.innerHTML = ''; 
     } 
     return this.wikipage.text; 
    } 
}); 

Seite Markup:

#wikiedit(contenteditable="true") 
     {{{ ck_deduplicate }}} 

Live-Saving Wenn Typing

Mit etwas schlauer Code ich es einrichten, um den Inhalt eines geöffneten Editor zu speichern und zu aktualisieren. Die endgültige Lösung mit Live-Speichern kam von this question.

Für Meteor ist das Setup unten. Zuerst das CKEditor-Setup. Vor dem Speichern des Dokuments erstellen wir ein Lesezeichen und manipulieren DOM, um dieses Element zu speichern (mit einer Konfigurationsänderung).

Template.single_doc.rendered = function() { 
    console.log('rendered') 
    var wiki_id = Router.current().data().wikipage._id, 
     // the method that does the main job of setting up CKEditor 
     assign_change = function(ev) { 
      var e = ev.editor, 

       // timeout is stored to cancel if key is pressed within 2 seconds 
       save_timeout, 

       // data saving function 
       save_data = function() { 
        clearTimeout(save_timeout); 
        var bm = e.getSelection().createBookmarks()[0]; 
        $(bm.startNode).attr('data-selection-bookmark','1'); 

        console.log('update', {_id: wiki_id, text: e.getSnapshot()}); 
        Meteor.call('doc.update', {_id: wiki_id, text: e.getSnapshot()}) 
        }; 

      // config updated to allow spans with our attribute 
      e.on('configLoaded', function() { 
       e.config.extraAllowedContent = "span[data-selection-bookmark]"; 
      }); 

      // watch document changed 
      e.on('change', function() { 
       console.log('change event'); 
       clearTimeout(save_timeout); 
       save_timeout = setTimeout(save_data, 2000); 
      }); 
     }, 

     // unfortunately, had to wrap `editor.on('change')` in the assign_change above 
     // because when `.rendered` is triggered, CKEditor is not loaded yet. 
     // Have to wait for it. 
     assign_event = function() { 
      if (typeof(CKEDITOR) == 'undefined') { 
       setTimeout(assign_event, 100); 
       return; 
      } 

      CKEDITOR.on('instanceReady', assign_change); 
     }; 


    assign_event(); 

} 

Dann der Helper, der die CKEditor-Daten manuell aktualisiert und den Cursor dorthin verschiebt, wo er benötigt wird.

Ein Nachteil ist, dass es nicht mit 2 Personen gleichzeitig bearbeiten funktioniert. Sie werden den Cursor ständig von einander stehlen. Dafür sollte eine relative Position im Speicher besser funktionieren. Aber dieses ist genug als vorübergehende Abhilfe und ein Ausgangspunkt. Hoffe, das hilft den anderen.