I am trying to implement a summernote editor that has editable areas (and also non editable areas). I have succeeded in most of this easily through markup like this:
<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>
...
The content itself is being fed from a Xquery to the database and based on user login, specific classes of content are marked editable while the whole article is marked not editable, allowing them to change only specific areas. This whole thing works perfectly with one exception, typing a space. In this example, I can edit in the UK div and not elsewhere. However, when i type a space the window scrolls and the space is not inserted.
The issue is that something, somewhere in this mode in summernote captures a keypress of space and causes the summernote div to scroll. I cannot figure out how to override this. This behavior does not happen if there is no mixed editable/non-editable areas.
I have tried an overall window.onkeydown to attempt to stop this behavior but it does not work. I cannot see where I am going wrong.
window.onkeydown = function(e) {
if(e.keyCode == 32 && $(e.target).attr('contenteditable') == 'true') {
e.stopPropagation();
e.preventDefault();
return false;
}
};
It does get inside this handler and the event target is the contenteditable div (the UK div in the example) but the space just gets eaten. The scrolling stops but no space. I can type all other characters, just not a space character.
Suggestions from summernote folks? Is there something in summernote doing this or?
Update 1 when testing with summernote 0.6.16 this does not happen, it does with the latest 0.8.2 and even 0.7.0
Testing with this simple example shows the behavior:
http://www.bootply.com/OfvSMvecXj
Changing this to 0.6.16 and you can type spaces in the editable div, anything later and they do not work.
Update 2 modifying the structure so that the contenteditable false div is not a parent of the true div solves the issue but this is less than desirable as the solution to the problem. By this, I have implemented this code below (fixed for UK but would be variable in the future). This marks all div's with class of UK as editable and all other lowest level elements as non-editable. This does have the desired effect but it should be simple as marking the highest level as not editable and only those areas that should be editable.
jQuery.ajax({
url: 'view-article.xq?doc=' + doc + '&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());
}
Thanks.