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>