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與淘汰賽數據綁定將不會更新

回答

相關問題