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

};