Question

我正在尝试实现一个具有可编辑区域（以及不可编辑区域）的summernote编辑器。我通过这样的标记轻松地成功完成了大部分内容：

<article contenteditable="false">
<div class="content" doc="123" title="Sample">
    <div class="panel">
        <h1>This is a sample document</h1>
        <div class="choice">
            <div class="territory ALL">
                <p>This is all (not editable)</p>
            </div>
            <div class="territory AUS">
                <p>This is AUS, not editable</p>
            </div>
            <div class="territory UK" contenteditable="true">
                <p>This is UK, editable</p>
            </div>
        </div>
...

内容本身正在从Xquery传送到数据库，并且基于用户登录，特定类别的内容被标记为可编辑，而整篇文章被标记为不可编辑，允许它们仅更改特定区域。这整个过程完美地完成了一个例外，键入一个空格。在这个例子中，我可以在英国div中编辑，而不是在其他地方编辑。但是，当我键入一个空格时，窗口会滚动并且不会插入空格。

问题在于，在summernote的这个模式中的某个地方会捕获空间的按键并导致summernote div滚动。我无法弄清楚如何覆盖它。如果没有混合的可编辑/不可编辑区域，则不会发生此行为。

我尝试过整个window.onkeydown尝试停止此行为，但它不起作用。我看不出我哪里出错了。

window.onkeydown = function(e) {
    if(e.keyCode == 32 && $(e.target).attr('contenteditable') == 'true') {
        e.stopPropagation();
        e.preventDefault();
        return false;
    }
};

它确实进入了这个处理程序，事件目标是contenteditable div（示例中的UK div），但空间才被吃掉。滚动停止但没有空格。我可以输入所有其他字符，而不是空格字符。

来自summernote人的建议？ summernote中有什么东西可以做到吗？

使用summernote 0.6.16进行测试时，

更新1 不会发生这种情况，最新的0.8.2甚至是0.7.0

使用这个简单示例进行测试可以显示行为：

http://www.bootply.com/OfvSMvecXj

将其更改为0.6.16，您可以在可编辑的div中键入空格，以后再进行任何操作。

更新2 修改结构，使得contenteditable false div不是true div的父级解决问题，但这不是解决问题的方法。通过这个，我在下面实现了这个代码（固定在英国，但将来会变化）。这标志着所有div与英国类别可编辑，所有其他最低级别元素不可编辑。这确实具有预期的效果，但它应该很简单，因为标记最高级别是不可编辑的，只有那些应该可编辑的区域。

jQuery.ajax({
    url: 'view-article.xq?doc=' + doc + '&amp;timestamp=' + timestamp,
    type: "GET",
    dataType: "html",
    complete: function (Response) {
        $('#viewer').html(Response.responseText);
        $('#summernote_copy').html(Response.responseText);
        // Mark only nodes available to edit here
        $('#summernote_copy *').each(function(i, elem){
            var c = $(elem).attr('class');
            if(typeof c != 'undefined' && ~c.indexOf('UK'))
                $(elem).attr('contenteditable','true');
            else if ($(elem).children().length == 0) {
                var in_target = false;
                $(elem).parents().each(function(i,par){
                    var d = $(par).attr('class');
                    if (typeof d != 'undefined' && ~d.indexOf('UK')){
                        in_target = true;}
                });
                if (!in_target) {
                    $(elem).attr('contenteditable','false');
                }
            }
        });
        $('#summernote').summernote('code', $('#summernote_copy').html());
    }

感谢。

Summernote具有混合的contenteditable和不可编辑的div，空格分隔并导致滚动

0 个答案: