Merged pull requests lemonde#52, lemonde#49, lemonde#48

README.md

@@ -31,7 +31,7 @@ HTML:
 <script src="angular-ckeditor.js"></script>
 
 <div ng-controller="CkeditorCtrl">
-  <div ckeditor="options" ng-model="content" ready="onReady()"></div>
+  <div ckeditor="options" ng-model="content" ready="onReady($instance)"></div>
 </div>
 ```
 
@@ -49,7 +49,7 @@ angular.module('controllers.ckeditor', ['ckeditor'])
   };
 
   // Called when the editor is completely ready.
-  $scope.onReady = function () {
+  $scope.onReady = function ($instance) {
     // ...
   };
 }]);
@@ -69,7 +69,10 @@ Angular-ckeditor uses `ng-model`. If you add an `ng-if` on the element to whom t
 ## Advanced usage
 
 ### getting internal ckeditor instance
-Internally, CKEditor gives a name to its instances, either **the id of the element it's on** or automatic name (editor1, editor2...). If you plan to look for your instances programmatically via `CKEditor.istances`, be sure to give them a unique id="..." (Beware of re-usable directives).
+Internally, CKEditor gives a name to its instances, either **the id of the element it's on** or automatic name (editor1, editor2...). If you plan to look for your instances programmatically via
+`CKEditor.instances`, be sure to give them a unique id="..." (Beware of re-usable directives).
+
+You can use the injected $instance that is passed into your ready function or
 
 In a directive on the same element, you can also use :
 ```javascript

angular-ckeditor.js

@@ -41,11 +41,28 @@
         // Initialize the editor content when it is ready.
         controller.ready().then(function initialize() {
           // Sync view on specific events.
-          ['dataReady', 'change', 'blur', 'saveSnapshot'].forEach(function (event) {
+          ['change', 'input', 'blur', 'saveSnapshot', 'key', 'paste', 'selectionChange'].forEach(function (event) {
             controller.onCKEvent(event, function syncView() {
               ngModelController.$setViewValue(controller.instance.getData() || '');
             });
           });
+          var firstTime = true;
+          ['dataReady'].forEach(function (event) {
+            controller.onCKEvent(event, function syncView() {
+              // First time only that we receive the dataReady event and the control is pristine it should remain so
+              firstTime &= ngModelController.$pristine;
+              if (firstTime) {
+                ngModelController.$pristine = false;  // Prevent the model change setting the form dirty.
+              }
+              ngModelController.$setViewValue(controller.instance.getData() || '');
+              ngModelController.$commitViewValue();
+              if (firstTime) {
+                firstTime = false;
+                ngModelController.$pristine = true;
+              }
+            });
+          });
+
 
           controller.instance.setReadOnly(!! attrs.readonly);
           attrs.$observe('readonly', function (readonly) {

test/angular-ckeditor.js

@@ -16,7 +16,7 @@ describe('CKEditor directive', function () {
 
     createElement = function () {
       element = $compile(
-        '<div contenteditable="true" ckeditor ng-model="content" ready="onReady()"></div>'
+        '<div contenteditable="true" ckeditor ng-model="content" ready="onReady($instance)"></div>'
       )(scope);
     };
   }));
@@ -61,7 +61,10 @@ describe('CKEditor directive', function () {
 
   it('should call the ready callback on start', function (done) {
     scope.content = 'Hello';
-    scope.onReady = done;
+    scope.onReady = function ($instance) {
+      expect($instance).to.deep.equal(_.find(CKEDITOR.instances));
+      done();
+    };
 
     createElement();
   });