CKEditorでAngularJSデータバインディングを使用するにはどうすればよいですか？

Question

どうすればいいですか？

私はCKEDITOR.replaceを呼び出すためにng:bind-templateと私のモデルとscriptタグをマッチングname属性でtextareaを使用してCKEditorバージョンにデータを取得することができました。

その後、変更を検出してtextareaに書き戻すCKEditorプラグインを作成しました。問題は、textareaがCKEditorの初期化時にイベントハンドラを失い、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に切り替えて、何か習慣をつくった。

Answer 1

onchangeプラグインを使用したこの種の作品は、http://alfonsoml.blogspot.com/2011/03/onchange-event-for-ckeditor.htmlです。添付こののみv0.10.6完全について

Answer 2

でテストされた

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

更新は、angular directiveを提供するモジュールです。私はまだそれを使用していないので、それがどのようにうまく機能し、統合されているかについてはコメントできません。