在角JS CKEditor的内容更新textarea的价值 [英] Updating textarea value with CKEditor content in Angular JS

问题描述

我使用最新的CKEditor（标准版），并在此基础上
<一href=\"http://stackoverflow.com/questions/11997246/bind-ckeditor-value-to-model-text-in-angularjs-and-rails\">question ，我已经实现了一个角指令这样，

I am using latest CKEditor (Standard Version) and based on this question , I have implemented an angular directive like this,

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模式下键入的东西，在这里我得到了类型化的内容，文本区域的NG-模式工作的罚款。

It's working fine when I am typing something in CKEditor GUI mode, here I am getting the typed content to textarea's ng-model.

但是当我切换到code编辑器，它没有得到更新的内容切换即使回到GUI。它需要在图形模式下再次输入一些东西。

But when I am switching to code-editor, it's not getting the updated content even after switch back to GUI. It's required to type something again in graphical mode.

什么是错我的指令？或者，我可以此指令与其他一些CKEditor的活动延长？

What is wrong with my directive? Or can I extend this directive with some other CKEditor events?

我想添加一些更多的事件提交表单或别的东西。

I want add some more events for form submit or something else.

演示在这里。 的

推荐答案

您指令运作良好。

有一个名为插件的 sourcearea ，控制CKEditor的行为而源模式的。我看不出插件，用来处理输入code中的任何事件被火。还有，虽然我们可以用它来赶上两个事件时的CKEditor追溯到
的 GUI模式的。该事件的 ariaWidget 和 dataReady

There is a plugin called sourcearea that controls the CKEditor behavior while on source mode. I couldn't see any event being fire inside the code of that plugin for handling input. There are though two events that we can use to catch when the CKEditor goes back to GUI mode. The events are ariaWidget and dataReady.

我已经更新您的例子使用 dataReady 事件，所以它切换回时更新textarea的。我也改变了 pasteState 事件的更改，作为<一个href=\"http://stackoverflow.com/questions/11997246/bind-ckeditor-value-to-model-text-in-angularjs-and-rails#comment27180866_12021632\">Dan卡拉贾说它是在4.2版本中引入的。
 更新小提琴都可以在这里找到

I've updated your example to use the dataReady event, so it updates the textarea when switching back. I also changed the pasteState event to change, as Dan Caragea said it was introduced in version 4.2. Updated fiddle can be found here

一个几乎有解决方案，我发现是听键事件，并更新模型。这几乎是没有的，因为它似乎该事件只发射了旧密钥pressed。所以，最后的关键始终是缺失。

One almost-there-solution I found is to listen to the key event and update the model. It is almost there, because it seems the event is only fired for the old key pressed. So the last key is always missing.

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

不管怎样，也许你可以从这个弄清楚如何解决最后一个关键问题。这几乎是没有！

Anyway, maybe you can figure out from this how to fix the last key problem. It is almost there!

编辑：更新拨弄链接正确的版本。

updated fiddle link to correct version

这篇关于在角JS CKEditor的内容更新textarea的价值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！