具有敲除数据绑定的TinyMCE将180;t更新

TinyMCE with knockout data binding would´t update

本文关键字：更新 TinyMCE 数据绑定      更新时间：2024-05-14

我有TinyMCE WYSiWYG编辑器，根据所选对象显示文本，但遇到绑定问题。

第一个"提示"似乎有效，但当从可用文本的下拉列表中选择新文本时，编辑器变为空白，Firebug控制台告诉我：

TypeError:D.hasChildNodes不是函数…ute（i），"string"==类型r）｛try｛r＝"true"==r？！0:"false"==r？！1:"null"===r？null：+r…

和

NS_ERROR_UNEXECTED：意外错误…/，"$1"）；return false｝｝）；if（！u.getParam（"accessibility_focus"））｛g.add（i.add（k，"a…

我尝试在此处重新创建代码：http://jsfiddle.net/xc4sz/1/它不是100%，但至少不起作用。）

如果我不是直接从文本1点击到文本2，而是通过"选择选项"，则文本将正确显示。

我想这与下面的"init"部分有关：

ko.bindingHandlers.tinymce = {
    init: function (element, valueAccessor, allBindingsAccessor, context) {
        var options = allBindingsAccessor().tinymceOptions || {};
        var modelValue = valueAccessor();
        var value = ko.utils.unwrapObservable(valueAccessor());
        var el = $(element)
        //handle edits made in the editor. Updates after an undo point is reached.
        options.setup = function (ed) {
            console.log(ed)
            ed.onChange.add(function (ed, l) {
                if (ko.isWriteableObservable(modelValue)) {
                    modelValue(l.content);
                }
            });
        };
        //handle destroying an editor 
        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            setTimeout(function () { $(element).tinymce().remove() }, 0)
        });
        //$(element).tinymce(options);
        setTimeout(function () { $(element).tinymce(options); }, 0);
        el.html(value);
    },
    update: function (element, valueAccessor, allBindingsAccessor, context) {
        var $element = $(element),
                       value = ko.utils.unwrapObservable(valueAccessor()),
                       id = $element.attr('id');
        //handle programmatic updates to the observable
        // also makes sure it doesn't update it if it's the same. 
        // otherwise, it will reload the instance, causing the cursor to jump.
        if (id !== undefined) {
            var tinymceInstance = tinyMCE.get(id);
            if (!tinymceInstance)
                return;
            var content = tinymceInstance.getContent({ format: 'raw' });
            if (content !== value) {
                $element.val(value);
                //this should be more proper but ctr+c, ctr+v is broken, above need fixing
                //tinymceInstance.setContent(value,{ format: 'raw' })
            }
        }
    }
};

根据您所依赖的TinyMCE和jQuery的版本，您可能想尝试我最近自己推出的自定义绑定。

它在GitHub和NuGet 上可用

我发现了这个问题。事情是这样的：

  • 选择Textbatch#1并进行一些更改
  • 您切换到Textbatch#2
  • 绑定从Textbatch#1正确更改为#2
  • 然后ed.onChange.add事件处理程序启动并用新文本批处理#2的内容覆盖以前的文本批处理#1的内容

看看这个更新后的fiddle（从URL中删除/show/light返回编辑器）。我不得不内联select2.js，因为Github不允许远程包含它托管的文件，这会导致你的fiddle失败。

重要部分在ko.utils.domNodeDisposal.addDisposeCallback:中

ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
  $(element).tinymce().onChange.remove(changeHandler);
  setTimeout(function () { $(element).tinymce().remove() }, 0)
});

我不知道为什么删除编辑器会延迟0秒，但这可能是有充分理由的。因此，我们所做的只是删除"change"处理程序，这样旧的编辑器就不能再更新视图模型中的绑定valueAccessor了。

编辑：我只是注意到我修理了你的小提琴，但不一定是你最初的例外……希望这两者有关联。

相关文章：