# Div with ContentEditable and two-way-binding

**URL:** https://discuss.emberjs.com/t/div-with-contenteditable-and-two-way-binding/20515
**Category:** Uncategorized
**Created:** [May 27, 2024, 9:54am UTC](https://discuss.emberjs.com/t/div-with-contenteditable-and-two-way-binding/20515 "2024-05-27T09:54:10Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![Marco\_Musolf](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/marco_musolf/32/17400_2.png) [@Marco\_Musolf](https://discuss.emberjs.com/u/Marco_Musolf)
#### Post date: [May 27, 2024, 9:54am UTC](https://discuss.emberjs.com/t/div-with-contenteditable-and-two-way-binding/20515/1 "2024-05-27T09:54:10Z")

</div>

Hi, I am working on an Ember 3.28 component where the user can do some text formatting in WYSIWIG style. The Data comes from a model and consists of html. I am able to show the formatted HTML but I am not able to update the model after the user has finished his editing. I appreciate any help 🙂THX Marco

---

<div class="post-metadata">

### Author: ![NullVoxPopuli](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/nullvoxpopuli/32/18691_2.png) [@NullVoxPopuli](https://discuss.emberjs.com/u/NullVoxPopuli)
#### Post date: [May 27, 2024, 7:09pm UTC](https://discuss.emberjs.com/t/div-with-contenteditable-and-two-way-binding/20515/2 "2024-05-27T19:09:16Z")

</div>

what code have you tried so far?

---

<div class="post-metadata">

### Author: ![Marco\_Musolf](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/marco_musolf/32/17400_2.png) [@Marco\_Musolf](https://discuss.emberjs.com/u/Marco_Musolf)
#### Post date: [May 28, 2024, 5:49am UTC](https://discuss.emberjs.com/t/div-with-contenteditable-and-two-way-binding/20515/3 "2024-05-28T05:49:33Z")

</div>

```auto
import Component from '@glimmer/component';
import { action } from '@ember/object';
import { tracked } from '@glimmer/tracking';
import { htmlSafe } from '@ember/template';

export default class RichTextEditorComponent extends Component {
    @tracked editorContent='';
    
    @action
    setupEditor(element){
        element.innerHTML = this.args.initialContent || '';
        element.addEventListener('input', this.updateContent.bind(this));
    }
    
    @action
    execCmd(command){
        document.execCommand(command, false, null);
        document.getElementById('editor').focus();
    }
    
    @action
    updateContent(event){
        this.editorContent = event.target.innerHTML;
        if (this.args.onSave) {
            this.args.onSave(this.editorContent);
        }
    }
}

```

```auto
<div class="toolbar" contenteditable="false">
    <button {{on "click" (fn this.execCmd "bold")}} contenteditable="false"><b>B</b></button>
    <button {{on "click" (fn this.execCmd "italic")}} contenteditable="false"><em>I</em></button>
    <button {{on "click" (fn this.execCmd "underline")}} contenteditable="false"><u>U</u></button>
    <button {{on "click" (fn this.execCmd "insertUnorderedList")}} contenteditable="false"><b>Aufzählung</b></button>
</div>
<div id="editor" value={{{@initialContent}}} class="editor form-control ember-text-area ember-view" contenteditable="true" {{did-insert this.setupEditor}}></div>

```

---

<div class="post-metadata">

### Author: ![NullVoxPopuli](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/nullvoxpopuli/32/18691_2.png) [@NullVoxPopuli](https://discuss.emberjs.com/u/NullVoxPopuli)
#### Post date: [May 28, 2024, 12:43pm UTC](https://discuss.emberjs.com/t/div-with-contenteditable-and-two-way-binding/20515/4 "2024-05-28T12:43:39Z")

</div>

after playing around with this for a bit, I made: [Glimmer Tutorial](https://tutorial.glimdown.com/8-form-data-controlled/7-contenteditable)

tl;dr: you have to give up on making contenteditable a controlled input due to how the cursor resets, and instead just set the value once.

However, ember doesn’t gave a good primitive for doing things _non_ reactively.

So this kind of a hack is needed:

```js
const setContent = modifier((element, [initialize]) => {
  (async () => {
    // Disconnect from auto-tracking
    // so we can only set the inner HTML once
    await Promise.resolve();
    initialize(element);
  })();
});

```

---

<div class="post-metadata">

### Author: ![Marco\_Musolf](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/marco_musolf/32/17400_2.png) [@Marco\_Musolf](https://discuss.emberjs.com/u/Marco_Musolf)
#### Post date: [May 29, 2024, 5:51am UTC](https://discuss.emberjs.com/t/div-with-contenteditable-and-two-way-binding/20515/5 "2024-05-29T05:51:44Z")

</div>

Thx for your help. Where is modifier coming from ? In case of the ember addon ember-modifier I am not able to install it due to my ember version 3.24 ☹

---

<div class="post-metadata">

### Author: ![NullVoxPopuli](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/nullvoxpopuli/32/18691_2.png) [@NullVoxPopuli](https://discuss.emberjs.com/u/NullVoxPopuli)
#### Post date: [May 29, 2024, 10:42am UTC](https://discuss.emberjs.com/t/div-with-contenteditable-and-two-way-binding/20515/6 "2024-05-29T10:42:26Z")

</div>

Do you get an error?

---

<div class="post-metadata">

### Author: ![Marco\_Musolf](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/marco_musolf/32/17400_2.png) [@Marco\_Musolf](https://discuss.emberjs.com/u/Marco_Musolf)
#### Post date: [May 29, 2024, 11:09am UTC](https://discuss.emberjs.com/t/div-with-contenteditable-and-two-way-binding/20515/7 "2024-05-29T11:09:13Z")

</div>

Yes it seems that my Ember version does not fit the requirements of ember-modifier. Furthermore it needs additional dependencies like ember-auto-import.