问将Ckeeditor值绑定到AngularJS和Rails中的模型文本
EN

Stack Overflow用户

提问于 2012-08-17 00:20:11

回答 7查看 30.9K关注 0票数 33

我想将CKEditor文本绑定到ng-model文本。我的观点：

    <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>

控制器

      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"];

我想在提交表单时在$scope.text中设置CKEditor值。

ruby-on-rails-3

angularjs

有奖征集｜云上CPU玩转AIGC挑战赛

参加活动赢取洛斐键盘、小米电纸书、智能音响等鹅厂周边！

回答 7

Stack Overflow用户

回答已采纳

发布于 2012-08-18 19:29:20

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.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'
    });
  }
};

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

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

票数 76

Stack Overflow用户

发布于 2015-01-09 00:54:34

如果您只是想在angular的编辑器文本区域中检索文本，调用CKEDITOR.instances.editor1.getData();直接在angularjs函数中获取该值。见下文。

在您的html中

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

票数 7

Stack Overflow用户

发布于 2013-09-01 02:47:53

Vojta回答部分起作用

在这篇文章中，我找到了一个解决方案

https://stackoverflow.com/a/18236359/1058096

最后的代码：

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