angularjs ckeditorディレクティブがサービスからデータをロードできない場合がある

Question

Vojta's angularJS directiveを使用しましたが、ckeditorがサービスからのデータを表示できないことがありました。これはリフレッシュ時にはほとんど起こりませんでしたが、ページに戻るときによく起こりました。私は$ render関数が常に正しいデータでck.setDataを呼び出していることを確認できましたが、時には表示されませんでした。

Answer 1

ckeditorが準備される前に、$ renderメソッドが呼び出されたように見えることがあります。私は、ckeditorの準備ができてから少なくとも1回呼び出されたことを確認するために、リスナーをinstanceReadyイベントに追加することでこれを解決できました。

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

完全性のために、私が使用した完全な指示があります。

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

完全なコードを参照してください。

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

また、私はこの問題 とするとき、私は新しいディレクティブを見つけを満たしています。それは私のためにうまくいく！

これを試してください：

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

を};