Multiple 4.2 CKEditor instances on one page with AngularJS

Question

I am using CKEditor with angularJS. I have two editor windows as below:

    {{ modal.data.text }}
    <textarea
         id="Textarea1"
         data-ck-editor
         data-ng-disabled="modal.action=='delete'"
         data-ng-model="modal.data.text"></textarea>
    {{ modal.data.notes }}
    <textarea
        id="Textarea2"
        data-ck-editor
        data-ng-disabled="modal.action=='delete'"
        data-ng-model="modal.data.notes"></textarea>

The application allows a user to select rows in a grid and then the following is executed to populate new data in the modal object. Note that the editor instances are created on start up and not each time a new row is selected.

$scope.modal.data = row;

I am using the following directive:

  app.directive('ckEditor',
        [ function() {
            return {
                require : '?ngModel',
                link : function($scope, elm, attr, ngModel) {

                    var ck = CKEDITOR.replace(elm[0]);

                    ck.on('instanceReady', function() {
                        ck.setData(ngModel.$viewValue);
                    });

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

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

When the user selects a row and then a tab the data "sometimes" appears and usually does not.

While testing this I noticed that commenting out the function: ck.on('pasteState', function() seems to help but then I also have more problems as it seems when I enter data into the CDEditor the model {{ }} don't show that data being updated.

Can someone help by giving me some advice on what I can do. The {{ modal.data.text }} and the {{ modal.data.notes }} get rendered but the CKEditor windows usually appear with no data in them. Also what's the function of 'pasteState' and how does the AngularJS model get updated when I do keystrokes in the CKEditor window? Final question. Will this even work with multiple editor windows. Will there be two instances of the editor created?

Answer 1

Creating multiple editors on the fly: http://jsfiddle.net/TheSharpieOne/cPTr7/

Starting with multiple editors and changing values on the fly: http://jsfiddle.net/TheSharpieOne/tBrKQ/1/

Updating on keystroke: http://jsfiddle.net/TheSharpieOne/fMC2p/ (Note: when editing within the plain textarea, ckEditor will parse the text and update it again, wrapping it in HTML)

All have the same directive:

app.directive('ckEditor', [function () {
    return {
        require: '?ngModel',
        link: function ($scope, elm, attr, ngModel) {

            var ck = CKEDITOR.replace(elm[0]);

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

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