将 ckeditor 数据绑定为敲除可观察对象时如何更新它？

Question

我正在尝试使用 ckeditor 作为 Knockout.js observable 并且我遇到了一些麻烦。首先，这是我的代码：

ko.bindingHandlers.CKEDITOR = {
init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
         var ckEditorValue = valueAccessor();
         var id = $(element).attr('id');
         var options = allBindings().EditorOptions;
         var instance = CKEDITOR.replace(id, {
             on: {
                 change: function () {
                     // This moves the caret to the start of the editor on each key pressed
                     ckEditorValue(instance.getData());
                 }
             }
         });
         // instance.setData(ckEditorValue());
     },
update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
         var id = $(element).attr('id');
         var ckEditorValue = valueAccessor();
         CKEDITOR.instances[id].setData(ckEditorValue());
     }
};

我在这段代码中面临的问题是，在我按下的每个键和change事件触发时，插入符号移动到编辑器的顶部开始位置。我尝试调用blur事件而不是change事件，但是当我单击保存按钮时它不会触发，只有当我单击空白位置或移动到另一个控件时才会触发。

我怎样才能保持我的 observable 更新呢？

Answer 1

我在不同的 editor 上遇到了类似的问题，并通过删除update处理程序并将其替换为手动订阅来解决它。这样，您可以引入一些共享状态，表示“跳过此更新，那是我”：

ko.bindingHandlers.CKEDITOR = {
  init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
    var ckEditorValue = valueAccessor();
    var id = $(element).attr('id');
    var options = allBindings().EditorOptions;
    var ignoreChanges = false;

    var instance = CKEDITOR.replace(id, {
      on: {
        change: function() {
          ignoreChanges = true;
          ckEditorValue(instance.getData());
          ignoreChanges = false;
        }
      }
    });

    ckEditorValue.subscribe(function(newValue) {
      if (!ignoreChanges) {
        instance.setData(newValue);
      }
    });

  }
};