contentEditable attribute doesn't work in gridstack

[Hedva]

Just wanted to point out that contentEditable="true" in gridstack behaves weird.
I only have tried it to use it in Two Grids Demo.

It doesn't work.

  <div class="grid-stack-item" data-gs-width="4" data-gs-height="1" data-gs-min-width="2" data-gs-max-width="4" data-gs-min-height="1" data-gs-max-height="4">
  <div class="grid-stack-item-content" contentEditable="true">Titel</div>
</div>

It works partially when settings $(this).focus(); on a onclick event;

<div class="grid-stack-item" data-gs-width="4" data-gs-height="1" data-gs-min-width="2" data-gs-max-width="4" data-gs-min-height="1" data-gs-max-height="4">
  <div class="grid-stack-item-content" contentEditable="true" onclick='$(this).focus();'>Titel</div>
</div>

This makes the content editable. But it makes it only able to put yourr mouse pointer in front of the text Can't put the mouse curser in between characters, or selecting all text.

[jonas3344]

I noticed that right-click also works, but opens of course the context-menu.

[adumesny]

I have not tried it, but you might need to separate the area you drag (I typically use a 20pix header in my widgets) vs the content area that I let use interact with content (graphs in my case). I'm guessing jquery-ui drag event is conflicting with editing events if on the same div...

[mdiehlenator]

So I've been playing around with this a bit. I've got some HTML that looks like this:

div class="grid-stack" data-gs-cell-height="2">
<div class="grid-stack-item window" data-gs-width="2" data-gs-height="3">
<div class="grid-stack-item-content" id="Customer_edit_users">
</div>
</div>
</div>

The contents of the inner-most div will get filled in via ajax, but it contains something like:

Email: <span id="user_email" contenteditable="true" onclick=" start_edit(this.id, 'user_email');" onblur="end_edit(this.id, 'user_email');">[% user.uemail%] </span> <br>

This is debugging code, so it's not expected to be pretty.... or even correct!

Now, at this point, I can click on the email span, and the cursor gets positioned at the beginning of the span content. But, I can cursor over and make changes, and those changes get passed on to javascript.

However, if I change the div class from grid-stack-item to Xgrid-stack-item, I end up being able to click on the email address and having the cursor positioned where I expect it.

This is the the ONLY change I've had to make to get the expected behavior. So, grid-stack seems to be using javascript to modify DOM elements in the grid-stack-item class.

For the record, my event handlers aren't very fancy:

function start_edit(id, name) {
var o = new Object;

o = document.getElementById(name);
o.fontStyle = "italic";
old_value = o.innerHTML;
o.focus();

}

function end_edit (id, name) {
var new_value = document.getElementById(name).innerHTML;
if (old_value != new_value) {
alert("You changed " + name + "/" + id + " from " + old_value + " to " + new_value);
}
clear_message();
o.fontStyle = "normal";
}

I hope this helps, because I love using this library.

Mike.

[jonas3344]

I think I fixed it somehow or found a way around. But was half a year ago, I need to have a look at my code when I find some spare time at work.

[adumesny]

this is fixed in 3.x with HTML5 D&D, on chrome. I changed float.html first widget to have

{x: 1, y: 0, w: 4, content: '<div contentEditable="true">Titel</div>'},

and I can edit and move the widget by the text area just fine.

[Gezdy]

You should re-open this bug for v7.1.0.
[v5.0.0 was ok]

Thx

[Gezdy]

@adumesny , I forgot to mention this bug correction in the #2093 pull request

thx

[adumesny]

closed in upcoming 7.1.1