将Ckeditor值绑定到angularjs和rails中的模型文本

CKEditor在键入时不会更新文本区域，因此您需要注意这一点。

这是一条使ng-model绑定与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);      };    }  };});

在html中，只需使用：

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

先前的代码将在每次更改时更新ng-model。

如果只想在保存时更新绑定，请覆盖“保存”插件，以执行除“保存”事件以外的任何操作。

// modified ckeditor/plugins/save/plugin.jsCKEDITOR.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'    });  }};

然后，在指令中使用此事件：

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());        });      });    }  };});