在Angular JS中使用CKEditor内容更新textarea值

一尘不染

在Angular JS中使用CKEditor内容更新textarea值

angularjs

我使用的是最新的CKEditor（标准版），根据这个问题，我实现了这样的角度指令，

var cmsPlus = angular.module('cmsPlus', []);

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

当我在CKEditor GUI模式下键入某些内容时，它工作正常，这里我将键入的内容添加到textarea的ng-model中。

但是，当我切换到代码编辑器时，即使切换回GUI，也无法获取更新的内容。需要在图形模式下再次键入内容。

我的指令有什么问题？还是可以通过其他一些CKEditor事件扩展此指令？

我想为表单提交或其他添加更多事件。

演示在这里。

阅读 315

2020-07-04

共1个答案

一尘不染

您的指令运行良好。

在 源代码模式下 ，有一个名为 sourcearea*
的插件可控制CKEditor的行为。我看不到该插件的代码中发生任何事件来处理输入。当CKEditor返回 GUI模式 时，有两个事件可以用来捕获
。这些事件是 ariaWidget 和 dataReady 。 ***

我已经更新了您的示例以使用 dataReady 事件，因此它在切换回时会更新文本区域。我也将 pasteState 事件更改为
change ，如Dan
Caragea所说，它是在4.2版中引入的。
可以在这里找到更新的小提琴

我发现的一种几乎解决方案是监听关键事件并更新模型。几乎就在那儿，因为似乎仅在按下旧键时才触发该事件。因此，最后一个键总是丢失。

var cmsPlus = angular.module('cmsPlus', []);

cmsPlus.directive('ckEditor', function() {
  return {
    require: '?ngModel',
    link: function(scope, elm, attr, ngModel) {
      var ck = CKEDITOR.replace(elm[0]);

      if (!ngModel) return;

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

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

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

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

无论如何，也许您可以从中弄清楚如何解决最后一个关键问题。快到了！

编辑：更新小提琴链接到正确的版本

2020-07-04