Meteor - Is there a way to get div contenteditable two way data binding to work?

Question

Unable to attach two way data binding to a <div contenteditable> tag. Here is the demo

html:

<body>
    <div contenteditable style="height:40px;min-width:40px">{{content}}</div>
</body>

js:

if (Meteor.isClient) {
    Session.setDefault('content', 'Try to edit me')

    Template.body.helpers({
        content: function () {
            return Session.get('content')
        }
    })

    Template.body.events({
        'keydown div': function (e) {
            setTimeout(function(){ Session.set('content', $(e.target).text()) })
        }
    })
}

There is also an open issue for this at github.

Try blur event, it will save content after you lose focus on div — sdooo, Mar 08 '15 at 22:48
@Sindis that works but it'd be nice to have it work on keydown as well :-\ — brg, Mar 08 '15 at 23:26

score 0 · Answer 1 · edited May 23 '17 at 11:50

you can use the 'input' event

meteorpad fork of your example : http://meteorpad.com/pad/x3JQpGiqpE2FrTfLK/content%20editable

related question : contenteditable change events

 Template.body.events({
    'input div': function (e) {
      Session.set('content', $(e.target).text());
    }
  });

However, there is a problem with binding editable elements in general, you'll notice each input event results in setting the text twice.

You can get around this by clearing out the editable text after each edit :

Template.body.events({
    'input div': function (e) {
      Session.set('content', $(e.target).text());
      $(e.target).text('');
    }
  });

But now you have another problem, the cursor jumps to the beginning.

In order to deal with these dilemmas, I use this logic :

"Did the user make this most recent edit to the data model?"

update the data model with the user's most recent text. Don't update the text editor. be optimistic.
if the update failed, set the text editor to the data model ( revert their edit, display some error )

"Did something besides the user change the data model for the text ? "

update the text editor to show the most recent text

then also you probably want to use underscore's debounce for the input event for some better performance. — looshi, Mar 08 '15 at 23:21

score 0 · Answer 2 · answered Mar 12 '15 at 16:41

0

Or just use https://github.com/gwendall/meteor-bindings. It makes use of reactive variables to bind any DOM element to inputs.

Disclaimer: I built it.

answered Mar 12 '15 at 16:41

gwendall

920
15
22

To data-bind a particular property in a collection? – brg Mar 15 '15 at 06:33
Seems like the code is not maintained anymore. Would also be interested getting it working with mongo connections. Any alternatives? – Lucbug Dec 20 '17 at 08:12

Meteor - Is there a way to get div contenteditable two way data binding to work?

2 Answers2

Linked