如何添加CKEditor的情況下，內部控制與AngularJS範圍和CKEditor的

他那裏所有，如何添加CKEditor的情況下，內部控制與AngularJS範圍和CKEditor的

最近我一直在用角JS試驗。一切都很好，我的控制器，服務等。

當我嘗試在ng控制器內創建一個可編輯的div時，ckeditor工具欄不會彈出。控制器外的任何其他div都可以正常工作。

HTML：

<!-- BEGIN Dynamic Content with AngularJS --> 
    <div id="js_enabled" class="js_enabled" ng-controller="boxes_controller"> 
     <div class="box" ng-repeat="box in boxes" style="min-width: {[{ boxes_width }]}%; width: {[{ boxes_width }]}%; max-width: {[{ boxes_width }]}%;"> 
      <p contenteditable="true"> asd</p> 
      <div class='box-content'> 
        <p> 
        <b>{[{ box.title }]}</b><br/> 
        {[{ box.description }]} 
        </p> 
      </div> 
     </div> 
    </div> 
<!-- END Dynamic Content with AngularJS -->

的{[{}]}是內插倍率。如果你可以看到有一個小「p」元素只爲測試contenteditable。這是不顯示ckeditor欄的元素。我測試過它不是CSS。 ckeditor的工具欄DIV元素甚至沒有創建，也沒有錯誤存在。

PS。如果我在我的控制器範圍外編輯任何其他元素，則一切正常。

來源

2013-05-19 Jimmy Kane

是CKEditor的呼籲動態創建的內容。我認爲這不是。它可以在自定義指令的鏈接函數中完成。 – lib3d

是的，我解決了它。 YOu是正確的，這是我的錯誤@ lib3d –

使它成爲一個簡單的指令。

只是加載ckeditor.js和代碼是：

mainApp.directive('ckEditor', function() { 
    return { 
     restrict: 'A', // only activate on element attribute 
     scope: false, 
     require: 'ngModel', 
     controller: function($scope, $element, $attrs) {}, //open for now 
     link: function($scope, element, attr, ngModel, ngModelCtrl) { 
      if(!ngModel) return; // do nothing if no ng-model you might want to remove this 
      element.bind('click', function(){ 
       for(name in CKEDITOR.instances) 
        CKEDITOR.instances[name].destroy(); 
       CKEDITOR.replace(element[0]); 
      }); 
     } 
    } 
});

支持多實例

來源

2013-05-20 14:04:59

如何添加CKEditor的情況下，內部控制與AngularJS範圍和CKEditor的

回答

相關問題