How can I use AngularJS data binding to CKEditor?

Question

How can I do it?

I managed to get the data in CKEditor using textarea with the name attribute corresponding to my model and a script tag with ng:bind-template to call CKEDITOR.replace .

Then I created a CKEditor plugin that detects changes and writes them back to textarea . The problem is that textarea loses its event handlers when CKEditor is initialized, and CKEditor does not write changes to textarea . It makes me think that I am approaching this wrong.

Next, I tried to use ng:eval-order="LAST" ng:eval="setupCKEditor()" and configure the editor from the setupCKEditor() function. This did not work, because even with ng:eval-order="LAST" function still runs before the nodes are created.

I found that adding a setTimeout(function () {...},0) around CKEDITOR.replace helps. Now the only problem is that when you change the model, it does not redraw the screen until another field is edited.

scope.$root.$eval(); seems to fix this.

Update

We ended up abandoning this, since we could never get it to work reliably. We switched to TinyMCE with Angular-UI for a while , and then ended up creating something normal.

Answer 1

This kind of work with the onchange plugin from 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); }; }); 

Update

This was only checked on v0.10.6

Answer 2

For completeness, a module is provided that provides the angular directive. I have not used it yet, so I cannot comment on how well it works / integrates.