淘汰赛，contenteditable（和降价）

Question

处理由 Markdown 字符串支持的 Knockout 绑定处理程序，并呈现（使用 markdown.js 和内置的“html”绑定处理程序）。

工作正常，但尝试添加 contenteditable 行为，并且在模糊时无法更新可观察值或仅使用删除所有降价格式的文本更新可观察值时遇到问题。

您有什么想法或替代方法吗？

这里是完整的小提琴：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 元素时内容编辑器会正确显示。但是，当您随后编辑内容并按几次 Enter 时，它会插入 html 标签，例如 <br /> 和 <div><br/></div>，而不是换行符。然后，当您通过单击关闭它来停止编辑 pre 元素时，您会看到原始 HTML 而不是实际的换行符。

来自jQuery text() documentation（由您的模糊事件处理程序使用）：

由于不同浏览器中 HTML 解析器的差异，文本 返回的换行符和其他空格可能会有所不同。

我不是降价专家，但在我看来降价取决于空格 - 如果行首有“#”，你会得到一个大标题，但如果“#”之前的换行符缺少，降价不会给你一个大标题。因此，如果您的空格被弄乱了，可能是由于 text() 调用与 contenteditable pre 的结果交互而导致的，这将导致降价弄乱。

那么你能做些什么呢？设置带有敲除的点击编辑。您可以在 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>