Knockout，contenteditable（和markdown）

Question

使用由Markdown字符串支持的Knockout綁定處理程序，並呈現（使用markdown.js和內置的'html'綁定處理程序）。

工作正常，但試圖添加contenteditable的行爲，並且遇到模糊不能更新的observable值時出現問題，或者僅使用刪除了所有markdown格式的文本更新observable。

任何想法或可以想到的替代方法？

完全小提琴這裏：http://jsfiddle.net/ZdxAS/3/

裝訂處理器：

ko.bindingHandlers["editable"] = { 
    init: function (element, valueAccessor) { 
     $(element).on('blur', function (event) { 
      var observable = valueAccessor(); 
      observable($(this).text()); 
      return true; 
     }); 
     $(element).on('focus', function (event) { 
      var observable = ko.utils.unwrapObservable(valueAccessor()); 
      $(this).text(observable); 
      return true; 
     }); 
     return $(element).on('keydown', function (event) { 
      var esc, observable, submit; 
      esc = event.which === 27; 
      element = event.target; 
      if (esc) { 
       document.execCommand("undo"); 
       element.blur(); 
       return true; 
      } else { 
       return true; 
      } 
     }); 
    }, 

    update: function (element, valueAccessor, allBindings, viewModel, context) { 
     var accessor = function() { 
      var text = ko.utils.unwrapObservable(valueAccessor()); 
      return markdown.toHTML(text); 
     } 
     return ko.bindingHandlers.html.update(element, accessor, allBindings, viewModel, context) 
    } 
}; 

Answer 1

這是相當奇怪的。我在Chrome中運行測試，這裏是我看到的：

在pre標籤上使用contenteditable = true屬性時，內容編輯器在單擊pre元素時正常顯示。但是，當您編輯內容並敲擊輸入幾次時，它會插入html標記，例如<br />和<div><br/></div>而不是換行符。當您通過單擊關閉來停止編輯pre元素時，您將看到原始HTML而不是實際的換行符。

而且從jQuery text() documentation（由模糊事件處理程序使用）：

由於在不同瀏覽器的HTML解析器變化，返回的文本 可以在換行和其他空白變化。

我沒有降價的專家，但它看起來對我來說，降價取決於空白 - 你得到一個大的頭，如果有一個「＃」在一行的開頭，但如果之前的換行「＃」缺失，減價不會給你一個大頭。因此，如果你的空白空間混亂了，這可能是由於文本（）調用與contenteditable pre的結果相互作用造成的，這會導致markdown變得混亂。

那你能做些什麼呢？設置點擊進行編輯與淘汰賽。你可以看到這是如何工作的http://adventuresindotnet.blogspot.com/2012/04/knockout-and-click-to-edit.html和http://knockoutjs.com/documentation/hasfocus-binding.html

例小提琴在http://jsfiddle.net/tlarson/w93BR/

的基本想法是有隻讀元素和編輯元素，其中只有一個取決於是否出現在時間您處於編輯模式或不在。

<pre data-bind="text: text, visible: !editingText(), click: textClick"></pre>   
<textarea data-bind="value: text, valueUpdate: 'afterkeyup', 
      visible: editingText, hasfocus: editingText" type='text'"></textarea>