Angularjs ckeditor dyrektywa czasami nie ładuje danych z usługi

Question

Użyłem Vojta's angularJS directive, ale czasami ckeditor nie wyświetliłby danych z usługi. To prawie nigdy się nie zdarzyło podczas odświeżania, ale często zdarza się, gdy wracasz do strony. Udało mi się zweryfikować, że funkcja $ render zawsze wywoływała ck.setData z poprawnymi danymi, ale czasami nie była wyświetlana.

Answer 1

Wygląda na to, że metoda $ render była czasami wywoływana, zanim ckeditor był gotowy. Udało mi się to rozwiązać, dodając detektor do zdarzenia instanceReady, aby upewnić się, że został wywołany co najmniej raz po tym, jak cededitor był gotowy.

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

W interesie kompletności, tutaj jest pełna dyrektywa, której użyłem.

//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()); 
      } 
     }); 
    } 

zobaczyć pełny kod:

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

Ja również spełniać ten problem a kiedy znalazł nową dyrektywę. To działa dobrze dla mnie!!!

Spróbuj tego:

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

};