angularjs ckeditor指令有時無法加載服務中的數據

Question

我用Vojta's angularJS directive但有時ckeditor無法顯示服務中的數據。這幾乎從來沒有發生刷新，但往往導航回到頁面時發生。我能夠驗證$ render函數總是用正確的數據調用ck.setData，但有時它不會顯示。

Answer 1

看起來$ render方法有時在ckeditor準備好之前調用。我可以通過向instanceReady事件添加一個偵聽器來解決這個問題，以確保它在ckeditor準備好後至少被調用一次。

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

};