x-model support for contenteditable elements

[MichaelBrauner]

It would be very nice, to have something like that:

<span contenteditable x-model="search" autocapitalize="none" spellcheck="false" tabindex="2"></span>

Right now - x-model is only working with input elements.

[KevinBatdorf]

Have you figured out an alternate approach? You probably need to set the initial value inside x-init then use an @input event to update the prop. Something like this:

<div x-data="{search: 'default'}" x-init="$refs.search.textContent = search">
  <span contenteditable x-ref="search" @input="search = $event.target.textContent"></span>
</div>

Here's a demo: https://codepen.io/KevinBatdorf/pen/gOwORNw

[MichaelBrauner]

Yes, of course I did it that way ;).
But I just wanted to say that it would be nice, if it could be implemented into x-model.
Thank your for anwer and for your effort.

[wouterdorgelo]

I can't get this to work..

Does anyone know how to get the value of my editable div in my textarea? The value should be updated live while typing.

<div x-data="{ content: '' }">
  <div x-ref="content" contenteditable="true">This text can be edited.</div>

  <form action="" method="post">
    <textarea x-html="$refs.content.innerHTML" style="display: none;"></textarea>
  </form>
</div>

[SimoTod]

@wouterdorgelo You can follow the example posted above. Something like

<div x-data="{ content: '' }">
  <div x-ref="content" contenteditable="true" @input="content = $event.target.textContent" x-init="content = $el.textContent">This text can be edited.</div>

  <form action="" method="post">
    <textarea x-model="content" hidden></textarea>
  </form>
</div>

[pomartel]

I was wondering if maybe the best answer to this question has changed since the introduction of programmatic access for x-model in the latest release of Alpine: https://alpinejs.dev/directives/model#programmatic%20access

[mattymaloney]

Not utilizing x-model, I think works well right now and is clean and easy to see. Perhaps it would be nice to replace the combination of @input and x-text with an x-model attribute, but I don't know if I would be able to use that, because typically I would need processing to occur on at least the @input event and perhaps even the x-text read event. Is it possible to do that with x-model?

e.g. a snippet from an editable table, but irl @input doing something useful:

...
<template x-for="(value, column_name) in row"><tr>
  <td x-text="row_num"></td>
  <td x-text="column_name"></td>
  <td contenteditable="true" @input="table.rows[row_num][column_name] = $el.textContent" x-text="table.rows[row_num][column_name]"></td>
</tr></template>
...

And thanks all for this thread. Couldn't figure this out without you.

[CosmicToast]

For future thread-readers, this can be achieved with the combination of Alpine.bind and abovementioned programmatic access.
The minimum viable example looks like this:

Alpine.bind('contenteditable', () => ({
    'contenteditable': true,
    '@input': '$el._x_model.set($el.textContent)',
    'x-init': `$nextTick(
        $el.textContent = $el._x_model.get()
        $watch($el.attributes["x-model"].nodeValue, (v) => {
            $el.textContent = v
        })
    })`,
}));

A function approach is also possible:

Alpine.bind('ceditable', () => ({
        contenteditable: true,
	['@input']() {
		this.$el._x_model.set(this.$el.textContent)
	},
	['x-init']() {
		this.$nextTick(() => {
			this.$el.textContent = this.$el._x_model.get()
			this.$watch(this.$el.attributes["x-model"].nodeValue, v => {
				$el.textContent = v
			})
		})
	}
}))

Followed by

<span x-model="my-data" x-bind="contenteditable"></span>

Obviously variations are possible.

[NightFurySL2001]

@CosmicToast The sample code works, but two problems:

1. second example/function approach, $el.textContent = v should be this.$el.textContent = v .
2. when typing in the contenteditable area, the cursor will jump back to the front of div making typing impossible.