Updating textarea value with CKEditor content in Angular JS

Question

I am using latest CKEditor (Standard Version) and based on this question , I have implemented an angular directive like this,

var cmsPlus = angular.module('cmsPlus', []);

cmsPlus.directive('ckEditor', function() {
  return {
    require: '?ngModel',
    link: function(scope, elm, attr, ngModel) {
      var ck = CKEDITOR.replace(elm[0]);

      if (!ngModel) return;

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

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

It's working fine when I am typing something in CKEditor GUI mode, here I am getting the typed content to textarea's ng-model.

But when I am switching to code-editor, it's not getting the updated content even after switch back to GUI. It's required to type something again in graphical mode.

What is wrong with my directive? Or can I extend this directive with some other CKEditor events?

I want add some more events for form submit or something else.

Demo here.

Answer 1

Your directive is working well.

There is a plugin called sourcearea that controls the CKEditor behavior while on source mode. I couldn't see any event being fire inside the code of that plugin for handling input. There are though two events that we can use to catch when the CKEditor goes back to GUI mode. The events are ariaWidget and dataReady.

I've updated your example to use the dataReady event, so it updates the textarea when switching back. I also changed the pasteState event to change, as Dan Caragea said it was introduced in version 4.2. Updated fiddle can be found here

One almost-there-solution I found is to listen to the key event and update the model. It is almost there, because it seems the event is only fired for the old key pressed. So the last key is always missing.

var cmsPlus = angular.module('cmsPlus', []);

cmsPlus.directive('ckEditor', function() {
  return {
    require: '?ngModel',
    link: function(scope, elm, attr, ngModel) {
      var ck = CKEDITOR.replace(elm[0]);

      if (!ngModel) return;

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

      function updateModel() {
          scope.$apply(function() {
              ngModel.$setViewValue(ck.getData());
          });
      }

      ck.on('change', updateModel);
      ck.on('key', updateModel);
      ck.on('dataReady', updateModel);

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

Anyway, maybe you can figure out from this how to fix the last key problem. It is almost there!

EDIT: updated fiddle link to correct version