froala的自定義敲除綁定使編輯器鬆動對焦

我正在嘗試編寫一個自定義綁定，以將敲除綁定到froala-editor。froala的自定義敲除綁定使編輯器鬆動對焦

我通過以下方式結合的作品：

ko.bindingHandlers.froala = { 
    init: function(element, valueAccessor){ 
     var options = { 
      inlineMode: false, 
      alwaysBlank: true, 
      buttons : ["bold", "italic", "createLink"], 
      autosaveInterval: 10, 
      contentChangedCallback: function() { 
       var html = $(element).editable("getHTML"), 
        observable = valueAccessor(); 
       observable(html); 
      } 
     }; 
     $(element).editable(options); 

     // handle disposal (if KO removed by the template binding) 
     ko.utils.domNodeDisposal.addDisposeCallback(element, function() { 
      $(element).editable("destroy"); 
     }); 
    }, 
    update: function(element, valueAccessor){ 
     var value = ko.utils.unwrapObservable(valueAccessor()); 
     $(element).editable("setHTML", value); 
    } 
}

這裏我使用autosaveInterval，因爲我無法找到任何更合適的方法。

我的HTML是非常簡單的：

<div data-bind="froala: txt"></div>

相應的JS：

function test() { 
    this.txt = ko.observable('Hello'); 
} 

var a = new test(); 
ko.applyBindings(a);

一切正常，但唯一的問題是，每個autosaveInterval時間後，重點從我的編輯將丟失。經過調查，我發現observable(html);是罪魁禍首。如果我將它評論出來，重點不會丟失，但我的模型不同步是可以理解的。

任何人都可以試圖幫助我嗎？

感謝@nemesv，我能夠做出jsfiddle with a repro。

來源

2014-04-27 Salvador Dali

當它試圖從你的代碼中創建一個小提琴時，我總是從「contentChangedCallback」中得到「無法讀取未定義的屬性」getHTML ... http://jsfiddle.net/3kDbV/然而，添加一個setTimeout修復小提琴http://jsfiddle.net/3kDbV/1/，它似乎是一個額外的，如果在更新中修復您的問題http://jsfiddle.net/3kDbV/2/。還有一些其他的東西是strage：'editable（「getHTML」）'返回一個包含一個字符串而不是字符串的數組，正如文檔中所描述的那樣，這就是爲什麼我在最後添加'[0]'小提琴。 – nemesv

@nemesv非常感謝你。錯誤'getHTML'是由於這樣一個事實，即他們git上的最後一次提交實際上並不是穩定版本。所以我修改了你的第一個小提琴來使用他們最新的穩定版本（我把它添加到了我的問題中）。 –

@SalvadorDali editable（'getHTML'）返回數組，因爲可能存在同一個選擇器的編輯器的多個實例。字符串是這些數組中的元素。例如，你可能有一個類「.editor」和2個div與這個類。當你用$（'。editor'）實例化編輯器時，會有2個實例。這就是爲什麼$（'。editor'）。editable（'getHTML'）會返回一個Array。 – st3fan

由於行$(element).editable("setHTML", value);，您正在失去焦點。當你使用var html = $(element).editable("getHTML")[0];時，你會得到HTML，但它不會給你編輯器的選擇。測試你在更新中獲得的值是否與前一個不同，不會再失去選擇。 http://jsfiddle.net/DVHzZ/16/

來源

2014-04-27 17:45:08 st3fan

contentChanged是一個事件，而不是一個回調，而[0]在最近的版本froala的不再需要的getHTML。

這是updated fiddle。

來源

2015-03-20 16:39:12

froala的自定義敲除綁定使編輯器鬆動對焦

回答

相關問題