La direttiva angularjs ckeditor a volte non riesce a caricare i dati da un servizio

Question

Ho utilizzato Vojta's angularJS directive ma a volte ckeditor non è riuscito a visualizzare i dati da un servizio. Questo non è quasi mai successo durante un aggiornamento, ma spesso si è verificato durante la navigazione verso la pagina. Sono stato in grado di verificare che la funzione $ render chiamasse sempre ck.setData con i dati corretti, ma a volte non veniva visualizzata.

Answer 1

Sembra che il metodo $ render sia stato talvolta chiamato prima che ckeditor fosse pronto. Sono stato in grado di risolvere questo problema aggiungendo un ascoltatore all'evento instanceReady per assicurarmi che fosse chiamato almeno una volta dopo che il ckeditor era pronto.

ck.on('instanceReady', function() { 
    ck.setData(ngModel.$viewValue); 
    }); 

Nell'interesse della completezza, ecco la direttiva completa che ho utilizzato.

//Directive to work with the ckeditor 
//See http://stackoverflow.com/questions/11997246/bind-ckeditor-value-to-model-text-in-angularjs-and-rails 
app.directive('ckEditor', function() { 
    return { 
    require: '?ngModel', 
    link: function(scope, elm, attr, ngModel) { 
     var ck = CKEDITOR.replace(elm[0], 
      { 
       toolbar_Full: 
       [ 
       { name: 'document', items : [] }, 
       { name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] }, 
       { name: 'editing', items : [ 'Find','Replace','-','SpellChecker', 'Scayt' ] }, 
       { name: 'forms', items : [] }, 
       { name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript' ] }, 
       { name: 'paragraph', items : [ 
       'NumberedList','BulletedList','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock' ] }, 
       { name: 'links', items : [] }, 
       { name: 'insert', items : [ 'SpecialChar' ] }, 
       '/', 
       { name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] }, 
       { name: 'colors', items : [] }, 
       { name: 'tools', items : [ 'Maximize' ] } 
       ] 
       , 
       height: '290px', 
       width: '99%' 
      } 
    ); 

     if (!ngModel) return; 

     //loaded didn't seem to work, but instanceReady did 
     //I added this because sometimes $render would call setData before the ckeditor was ready 
     ck.on('instanceReady', function() { 
     ck.setData(ngModel.$viewValue); 
     }); 

     ck.on('pasteState', function() { 
     scope.$apply(function() { 
      ngModel.$setViewValue(ck.getData()); 
     }); 
     }); 

     ngModel.$render = function(value) { 
     ck.setData(ngModel.$viewValue); 
     }; 

    } 
    }; 
}); 

Answer 2

function updateModel() { 
     scope.$apply(function() { 
      if (ck.getData().length) { 
       ngModel.$setViewValue(ck.getData()); 
      } 
     }); 
    } 

vedere codice completo:

return { 
    require: '?ngModel', 
    scope: true, 
    link: function (scope, element, attr, ngModel) { 
     if (!ngModel) return; 

     var ck = CKEDITOR.replace(element[0]); 

     ck.on('instanceReady', function() { 
      ck.setData(ngModel.$viewValue); 
     }); 

     function updateModel() { 
      scope.$apply(function() { 
       if (ck.getData().length) { 
        ngModel.$setViewValue(ck.getData()); 
       } 
      }); 
     } 

     ck.on('pasteState', updateModel); 
     ck.on('change', updateModel); 
     ck.on('key', updateModel); 
     ck.on('dataReady', updateModel); 

     ngModel.$render = function() { 
      ck.setData(ngModel.$modelValue); 
     }; 
    } 
} 

Answer 3

Ho anche incontrare questo problema E quando ho trovato una nuova direttiva. Funziona bene per me !!!

Si prega di provare questo:

return { 
require: '?ngModel', 
scope: true, 
link: function (scope, element, attr, ngModel) { 
    if (!ngModel) return; 

    var ck = CKEDITOR.replace(element[0]); 

    ck.on('instanceReady', function() { 
     ck.setData(ngModel.$viewValue); 
    }); 

    function updateModel() { 
     scope.$apply(function() { 
      if (ck.getData().length) { 
       ngModel.$setViewValue(ck.getData()); 
      } 
     }); 
    } 

    ck.on('pasteState', updateModel); 
    ck.on('change', updateModel); 
    ck.on('key', updateModel); 
    ck.on('dataReady', updateModel); 

    ngModel.$render = function() { 
     ck.setData(ngModel.$modelValue); 
    }; 
} 

};