淘汰赛，内容可编辑(和减价) [英] Knockout, contenteditable (and markdown)

问题描述

处理由markdown字符串支持并进行渲染的Knockout绑定处理程序(使用markdown.js和内置的"html"绑定处理程序).

Working on a Knockout bindinghandler that is backed by a markdown string, and renders (using markdown.js and the built-in 'html' bindinghandler).

效果很好，但是尝试添加内容可编辑的行为，并遇到无法在模糊时更新可观察值的问题，或者只删除了所有markdown格式的文本就更新了可观察值.

Works fine, but tried to add contenteditable behavior, and having trouble with the observable value not updating on blur, or updating the observable with only the text with all markdown formatting removed.

您能想到的任何想法或替代方法吗?

Any ideas or an alternate approach you can think of?

此处提供完整的小提琴: http://jsfiddle.net/ZdxAS/3/

Full fiddle here: 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)
    }
};

推荐答案

那很奇怪.我在Chrome中运行了测试，这就是我所看到的:

That's rather weird. I ran the tests in Chrome, and here is what I saw:

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

When using the contenteditable=true attribute on a pre tag, the content editor appears properly when the pre element is clicked on. However, when you then edit the content and by hitting enter a few times, it inserts html tags such as <br /> and <div><br/></div> rather than new line characters. When you then stop editing the pre element by clicking off it, you then see the raw HTML rather than actual line feeds.

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

And from the jQuery text() documentation (used by your blur event handler):

由于不同浏览器中HTML解析器的不同，因此文本 返回的内容可能在换行符和其他空白处有所不同.

Due to variations in the HTML parsers in different browsers, the text returned may vary in newlines and other white space.

我不是markdown专家，但在我看来，markdown取决于空白-如果行首有#"，但是如果换行符位于#"之前，则会出现较大的标题缺少，降价促销不会给您带来大的标头.因此，如果您的空白被弄乱了，这可能是由于text()调用与contenteditable pre的结果相互作用所导致的，这将导致markdown变得混乱.

I'm no markdown expert, but it looks to me like markdown depends on whitespace - you get a big header if there is a "#" at the beginning of a line, but if the line feed before the "#" is missing, markdown won't give you a big header. So if your whitespace is messed up, as can be caused by the text() call interacting with the results of the contenteditable pre, this would cause the markdown to get messed up.

那你该怎么办呢?设置带有剔除的点击以进行编辑.您可以在 http://adventuresindotnet上了解它的工作原理. blogspot.com/2012/04/knockout-and-click-to-edit.html 和 http://knockoutjs.com/documentation/hasfocus-binding.html

So what can you do instead? Set up click-to-edit with knockout. You can see how this works at http://adventuresindotnet.blogspot.com/2012/04/knockout-and-click-to-edit.html and http://knockoutjs.com/documentation/hasfocus-binding.html

在 http://jsfiddle.net/tlarson/w93BR/

基本思想是拥有一个只读元素和一个可编辑元素，并且取决于您是否处于编辑模式，一次只能显示其中一个.

The basic idea is to have a read-only element and an editable element, and only one of them appears at a time depending on whether you are in edit mode or not.

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

这篇关于淘汰赛，内容可编辑(和减价)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！