如何使用CKEditor使用AngularJS數據綁定？

我能夠通過使用textarea與name屬性匹配我的模型和script標籤與ng:bind-template調用CKEDITOR.replace獲取數據到CKEditor的。

然後，我製作了一個CKEditor插件，用於檢測更改並將它們寫回到textarea。問題在於，當CKEditor初始化時，textarea會丟失它的事件處理程序，並且CKEditor不會更改textarea。這讓我覺得我正在接近這個錯誤的方式。

接下來我嘗試使用ng:eval-order="LAST" ng:eval="setupCKEditor()"並從setupCKEditor()函數設置編輯器。這不起作用，因爲即使使用ng:eval-order="LAST"，該功能仍然在節點創建之前運行。

我發現在CKEDITOR.replace周圍添加一個setTimeout(function() {...},0)有幫助。現在唯一的問題是，當它改變模型時，它不會重畫屏幕，直到編輯了另一個域。

scope.$root.$eval();似乎解決了這個問題。

更新

我們最終放棄這一點，因爲我們永遠無法得到它可靠地工作。我們切換到TinyMCE with Angular-UI一段時間，然後結束了建立自定義的東西。

來源

2011-10-21 respectTheCode

看到這個的其他問題： [http://stackoverflow.com/questions/18685530/multiple-4-2-ckeditor-instances-on-one-page-with-angularjs?rq=1] [ 1] [1]：http://stackoverflow.com/questions/18685530/multiple-4-2-ckeditor-instances-on-one-page-with-angularjs?rq=1 –

這種工作與onchange插件http://alfonsoml.blogspot.com/2011/03/onchange-event-for-ckeditor.html。

angular.directive("my:ckeditor", function (expression, compiledElement) { 
    return function fn(element) { 
     var scope = this; 

     setTimeout(function() { 
      CKEDITOR.replace("editor-" + index, {extraPlugins: 'onchange'}); 

      scope.$watch("layers[" + index + "].src", function() { 
       if (!CKEDITOR.instances["editor-" + index]) return; 
       if (scope[expression] == CKEDITOR.instances["editor-" + index].getData()) return; 
       CKEDITOR.instances["editor-" + index].setData(scope[expression]); 
      }); 

      CKEDITOR.instances["editor-" + index].on("change", function() { 
       scope[expression] = CKEDITOR.instances["editor-" + index].getData(); 
       scope.$root.$eval(); 
      }); 
     }, 0); 
    }; 
});

更新

此只被上v0.10.6

來源

2011-10-24 14:12:06 respectTheCode

PLZ可以你分享你的HTML部分我沒有得到什麼是「my：ckeditor」在angular.directive – swapnilp

只需將它作爲屬性添加到textarea。像這樣''textarea我：texteditor =「content」id =「editor-1」>' – respectTheCode

有沒有人有一個工作現場的例子？我試圖執行你的指令，但什麼都不會發生。感覺就像它甚至沒有使用過...... :( – Preexo

爲了完整性測試，附着是一個模塊，以提供一個angular directive。我還沒有使用它，所以我無法評論它的工作/集成程度。

來源

2014-01-08 05:11:14 Jonoabroad

如何使用CKEditor使用AngularJS數據綁定？

回答

相關問題