Question

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

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

TypeError：D.hasChildNodes不是函数 ... ute（i），“string”== typeof r）{try {r =“true”=== r？！0：“false”=== r？！1：“null”=== r ？空：+ R ...

和

NS_ERROR_UNEXPECTED：意外错误 ... /，“$ 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' })
            }
        }
    }
};

Answer 1

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

可在GitHub和NuGet

上找到

Answer 2

我发现了这个问题。发生了什么事：

您选择Textbatch＃1并进行一些更改
您切换到Textbatch＃2
绑定从Textbatch＃1正确更改为＃2
然后ed.onChange.add事件处理程序启动并覆盖上一个 Textbatch＃1的内容与 new Textbatch＃2

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

重要的部分在ko.utils.domNodeDisposal.addDisposeCallback：

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

  setTimeout(function () { $(element).tinymce().remove() }, 0)
});

我不知道为什么删除编辑器会在0秒的超时时间内被延迟，但可能有一个很好的理由。所以我们所做的就是删除'change'处理程序，以便旧编辑器不再更新viewmodel中绑定的valueAccessor。

编辑：我刚注意到我修复了你的小提琴，但不一定是你最初的例外......这里是希望这两者是相关的。

具有敲除数据绑定的TinyMCE不会更新

2 个答案: