Bind Ckeditor value to model text in AngularJS and Rails

Question

I want to bind CKEditor text to ng-model text. My View:

    <form name="postForm" method="POST" ng-submit="submit()" csrf-tokenized class="form-horizontal">         <fieldset>     <legend>Post to: </legend>     <div class="control-group">       <label class="control-label">Text input</label>       <div class="controls">         <div class="textarea-wrapper">           <textarea id="ck_editor" name="text" ng-model="text" class="fullwidth"></textarea>         </div>         <p class="help-block">Supporting help text</p>       </div>     </div>      <div class="form-actions">       <button type="submit" class="btn btn-primary">Post</button>       <button class="btn">Cancel</button>       <button class="btn" onclick="alert(ckglobal.getDate())">Cancel123</button>     </div>   </fieldset> </form> 

controller

      function PostFormCtrl($scope, $element, $attrs, $transclude, $http, $rootScope) {       $scope.form = $element.find("form");       $scope.text = "";            $scope.submit = function() {           $http.post($scope.url, $scope.form.toJSON()).           success(function(data, status, headers, config) {                   $rootScope.$broadcast("newpost");                   $scope.form[0].reset();               });       };            $scope.alert1 = function(msg) {           var sval = $element.find("ckglobal");           //$('.jquery_ckeditor').ckeditor(ckeditor);                                                                                                                                 alert(sval);       };     }     PostFormCtrl.$inject = ["$scope", "$element", "$attrs", "$transclude", "$http", "$rootScope"]; 

I want to set CKEditor value in $scope.text at the time of form submit.

Answer 1

CKEditor does not update textarea while typing, so you need to take care of it.

Here's a directive that will make ng-model binding work with CK:

angular.module('ck', []).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);       };     }   }; }); 

In html, just use:

<textarea ck-editor ng-model="value"></textarea> 

---

The previous code will update ng-model on every change.

If you only want to update binding on save, override "save" plugin, to not do anything but fire "save" event.

// modified ckeditor/plugins/save/plugin.js CKEDITOR.plugins.registered['save'] = {   init: function(editor) {     var command = editor.addCommand('save', {       modes: {wysiwyg: 1, source: 1},       readOnly: 1,       exec: function(editor) {         editor.fire('save');       }     });      editor.ui.addButton('Save', {       label : editor.lang.save,       command : 'save'     });   } }; 

And then, use this event inside the directive:

angular.module('ck', []).directive('ckEditor', function() {   return {     require: '?ngModel',     link: function(scope, elm, attr, ngModel) {       var ck = CKEDITOR.replace(elm[0]);        if (!ngModel) return;        ck.on('save', function() {         scope.$apply(function() {           ngModel.$setViewValue(ck.getData());         });       });     }   }; }); 

Answer 2

If you simply want to retrieve text in the editor textarea in angular, call CKEDITOR.instances.editor1.getData(); to get the value directly in an angularjs function. See below.

In your html

In the test.controller.js

(function () {     'use strict';      angular         .module('app')             .controller('test', test);      test.$inject = [];       function test() {          //this is to replace $scope         var vm = this;          //function definition         function postJob()         {                       vm.Description = CKEDITOR.instances.editor1.getData();             alert(vm.Description);         }     }  })();