Knockout js的'文章'預覽框

最近拿起knockoutjs和我試圖做一個預覽框，將在div中呈現html，因爲我寫在一個wysiwyg編輯器。現在我試圖讓我寫的文本在div中呈現，但它似乎與wysiwyg編輯器相沖突。我通過渲染文字在正常的<textarea>字段中測試腳本，沒有問題，工作。然而，當我在wysiwyg編輯器中嘗試做同樣的事情時，它不會渲染任何東西。Knockout js的'文章'預覽框

我使用CKeditor btw。我基本上有這樣的：

<textarea name="body" data-bind="value: body"></textarea> 
<script type="text/javascript"> 
    CKEDITOR.replace('body'); 
</script>

CKEDITOR默認情況下，將獲得與編輯界面更換需要一個<textarea>場名爲「身體」。

腳本本身就像我提到的那樣工作，它在正常的<textarea>上工作，但是當我在<textarea>上運行CKEDITOR.replace時似乎不喜歡它。

來源

2013-04-17 ejx

使用firebug或chrome開發人員工具查看CKeditor生成的HTML外觀。它可能會用一些其他元素替換textarea。 –

麻煩的是，ckeditor用contenteditable替換它，並沒有它知道的值綁定。你可以寫一個customBindingHandler來做到這一點。前一段時間我爲CLEditor寫了一篇文章。這裏是什麼樣子

ko.bindingHandlers.cleditor = { 
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext)    { 

    var modelValue = valueAccessor(); 
    var options = {} 

    if (allBindingsAccessor().cleditorOptions) 
     options = $.extend(options, allBindingsAccessor().cleditorOptions); 

    var ko_editor = $(element).cleditor(options); 

    if (allBindingsAccessor().cleditorCSS) { 
     var cssLink = ko_editor[0].doc.createElement("link"); 
     cssLink.rel = "stylesheet"; 
     cssLink.type = "text/css"; 
     cssLink.href = allBindingsAccessor().cleditorCSS; 
     if (ko_editor[0].doc.head === undefined) { 
      var headElement = ko_editor[0].doc.getElementsByTagName('head'); 
      headElement[0].appendChild(cssLink); 
     } 
     else 
      ko_editor[0].doc.head.appendChild(cssLink); 
    } 

    ko_editor[0].change(
     function (a) { 
      var elementValue = ko_editor[0].doc.body.innerHTML; 

      if (ko.isWriteableObservable(modelValue)) { 
       modelValue(elementValue); 
      } 
      else { //handle non-observable one-way binding 
       var allBindings = allBindingsAccessor(); 
       if (allBindings['_ko_property_writers'] && allBindings['_ko_property_writers'].htmlValue) allBindings['_ko_property_writers'].htmlValue(elementValue); 
      } 
     } 
    ); 

}, 
update: function (element, valueAccessor) { 
    var value = ko.utils.unwrapObservable(valueAccessor()) || ""; 
    var ko_editor = $(element).cleditor(); 
    if (ko_editor[0].doc.body.innerHTML !== value) { 
     ko_editor[0].doc.body.innerHTML = value; 
     ko_editor[0].focus(); 
    } 
} 
};

和HTML看起來像這樣

<textarea rows="20" data-bind="cleditor: Body, cleditorCSS: 'path/ComposeEditor.css', cleditorOptions:$root.EditorOptions"></textarea>

，所以你現在可以提供一個觀察的所謂的身體（這是值將是商店），一個CSS和在您的視圖模型中指定的選項。

希望能幫到你。

來源

2013-04-17 15:38:32

Knockout js的'文章'預覽框

回答

相關問題