CKEditor內聯指令不適用於Angular 1.2.0-rc.3

Question

剛剛更改爲Angular 1.2.0-rc.3（來自1.2.0-rc.2）並且內聯編輯器的指令不再有效。

在正常模式下工作正常，但不是內聯。

有誰知道如何解決這個問題？

謝謝。

app.directive('uiCkeditor', [function() { 
     return { 
      require: '?ngModel', 
      link: function(scope, element, attrs, ngModel) { 
       if (!ngModel) 
        return; 

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

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

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

      } 
     } 
    }]) 

Answer 1

我用NG綁定，HTML渲染什麼是模型，我創建了指令CK-在線添加的內嵌功能，並結合該模型的在線編輯器中發生的變化。這個指令需要一個ng-bind-html的工作，你還需要ngSanitize添加到你的模塊。將指令ck-inline添加到您的元素，它應該工作正常。

我建議你爲常規編輯器使用不同的指令，因爲它具有不同的行爲，並且只需使用ng-model指令即可工作。

我也使用$超時，因爲我注意到，如果我沒有呈現文本，然後ckeditor以某種方式刪除所有弄亂模型的值（這不會發生與非內聯選項）。這是代碼。

yourModule.directive('ckInline', ['$sce', '$timeout', function($sce, $timeout){ 
    return{ 
     require : '?ngBindHtml', 
     scope:{value:"=ngBindHtml"}, 
     link : function(scope, elm, attr, ngBindHtml) 
     { 
      $timeout(function() 
      { 
       var ck_inline; 
       elm.attr("contenteditable", "true"); 
       CKEDITOR.disableAutoInline = true; 
       ck_inline = CKEDITOR.inline(elm[0]); 

       if (!attr.ngBindHtml) 
        return; 

       ck_inline.on('instanceReady', function() 
       { 
        ck_inline.setData(elm.html()); 
       }); 

       function updateHtml() 
       { 
        scope.$apply(function() 
        { 
         scope.value = $sce.trustAsHtml(ck_inline.getData()); 
        }); 
       } 


       ck_inline.on('blur', updateHtml); 
       ck_inline.on('dataReady', updateHtml); 

      }); 
     } 
    }; 
}]);