使用 Angular JS 中的 CKEditor 内容更新 textarea 值 [英] Updating textarea value with CKEditor content in Angular JS

问题描述

我正在使用最新的 CKEditor(标准版)并基于此问题，我已经实现了一个角度指令像这样，

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 模式下输入内容时它工作正常，在这里我将输入的内容输入到 textarea 的 ng-model.

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.

但是当我切换到代码编辑器时，即使切换回 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 的行为.我在该插件的代码中看不到任何用于处理输入的事件.当 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 事件更改为 change，如 Dan Caragea 说 它是在 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

我发现的一个几乎可行的解决方案是监听 key 事件并更新模型.它几乎就在那里，因为似乎只有按下旧键才会触发事件.所以最后一个键总是丢失.

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

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