12

我使用了 Vojta 的 angularJS 指令，但有时 ckeditor 无法显示来自服务的数据。这几乎从未在刷新时发生，但在导航回页面时经常发生。我能够验证 $render 函数总是使用正确的数据调用 ck.setData，但有时它不会显示。

4

3 回答 3

11

似乎 $render 方法有时会在 ckeditor 准备好之前被调用。我能够通过向 instanceReady 事件添加一个侦听器来解决此问题，以确保在 ckeditor 准备好后至少调用它一次。

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

为了完整起见，这里是我使用的完整指令。

//Directive to work with the ckeditor
//See http://stackoverflow.com/questions/11997246/bind-ckeditor-value-to-model-text-in-angularjs-and-rails
app.directive('ckEditor', function() {
  return {
    require: '?ngModel',
    link: function(scope, elm, attr, ngModel) {
      var ck = CKEDITOR.replace(elm[0],
            {
                toolbar_Full:
                [
                { name: 'document', items : [] },
                { name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
                { name: 'editing', items : [ 'Find','Replace','-','SpellChecker', 'Scayt' ] },
                { name: 'forms', items : [] },
                { name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript' ] },
                { name: 'paragraph', items : [
                'NumberedList','BulletedList','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock' ] },
                { name: 'links', items : [] },
                { name: 'insert', items : [ 'SpecialChar' ] },
                '/',
                { name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
                { name: 'colors', items : [] },
                { name: 'tools', items : [ 'Maximize' ] }
                ]
                ,
                height: '290px',
                width: '99%'
            }
    );

      if (!ngModel) return;

      //loaded didn't seem to work, but instanceReady did
      //I added this because sometimes $render would call setData before the ckeditor was ready
      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.$viewValue);
      };

    }
  };
});
于 2013-03-18T17:53:24.853 回答
3 
   function updateModel() {
        scope.$apply(function() {
            if ( ck.getData().length ) {
                ngModel.$setViewValue(ck.getData());
            }
        });
    }

查看完整代码：

return {
    require: '?ngModel',
    scope: true,
    link: function (scope, element, attr, ngModel) {
        if (!ngModel) return;

        var ck = CKEDITOR.replace(element[0]);

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

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

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

        ngModel.$render = function() {
            ck.setData(ngModel.$modelValue);
        };
    }
}
于 2014-07-02T22:02:19.650 回答
0

我也遇到了这个问题当我找到一个新指令时。这对我来说很有效！！！

请试试这个：

return {
require: '?ngModel',
scope: true,
link: function (scope, element, attr, ngModel) {
    if (!ngModel) return;

    var ck = CKEDITOR.replace(element[0]);

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

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

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

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

};

于 2015-03-11T03:05:00.563 回答