2

处理由 Markdown 字符串支持的 Knockout bindinghandler，并呈现（使用 markdown.js 和内置的 'html' bindinghandler）。

工作正常，但尝试添加 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)
    }
};
4

1 回答 1

3

那是相当奇怪的。我在 Chrome 中运行了测试，这是我看到的：

在 pre 标记上使用 contenteditable=true 属性时，单击 pre 元素时内容编辑器会正确显示。但是，当您随后编辑内容并按几次 Enter 时，它会插入 html 标记，例如<br />and<div><br/></div>而不是换行符。然后，当您通过单击关闭它来停止编辑 pre 元素时，您会看到原始 HTML 而不是实际的换行符。

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

由于不同浏览器中 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>
于 2013-04-27T18:43:22.780 回答