TinyMCE与淘汰赛数据绑定将不会更新

我有TinyMCE WYSiWYG编辑器呈现文本取决于选定的对象，但遇到绑定的问题。TinyMCE与淘汰赛数据绑定将不会更新

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

类型错误：D.hasChildNodes不是一个函数“i”，“string”== typeof r）{try {r =“true”=== r？！0：“false”=== r？！1：“null”=== ·R空：+ R ...

和

NS_ERROR_UNEXPECTED：意外的错误 ....../“$ 1”））;返回false}}）;如果（u.getParam（ “accessibility_focus”！））{g.add（i.add（k，“a ...

我试图在这里重新创建我的代码：http://jsfiddle.net/xc4sz/1/ 这不是100％，但至少它不起作用。 ;）

如果我不是直接从文本1点击文本2点击“选择选项”，文本会正确显示。

我猜它与下面的“初始化”部分做：

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

来源

2013-12-09 Asle G

取决于你是依赖于的TinyMCE的和版本的jQuery，你可能想尝试定制结合我最近也推出自己。

它可在GitHub和NuGet

来源

2013-12-18 15:22:50

不错的，michaelpapworth。我可以挑战您将文本的标记/自动标记添加到绑定中吗？ ;） –

我不确定在绑定的上下文中“标记/自动标记”的含义。你介意在GitHub上为我的存储库创建一个问题，供我考虑吗？ –

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

您选择Textbatch＃1和作出一些改变
您切换到Textbatch＃2
正确的结合改变从Textbatch＃1〜＃2
那么ed.onChange.add事件处理器踢和覆盖以前 Textbatch＃1与该新 Textbatch＃2的含量

查看此updated fiddle（从URL中删除/显示/指示灯以返回编辑器）。我不得不内嵌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'处理程序，以便旧编辑器不再更新视图模型中的绑定值访问器。

编辑：我只是注意到我固定你的小提琴，但不一定是你原来的例外......这里是希望这两个是相关的。

来源

2013-12-10 11:02:17 janfoeh

嗯。 @janfoeh，我看不出小提琴的行为有什么不同。我仍然只能从第一个选择的文本中显示文本。 –

有趣......在Chrome上运行，但不在FF上。 – janfoeh

不适用于Safari。 –

TinyMCE与淘汰赛数据绑定将不会更新

回答

相关问题