how to use simpleMDE in livewire

I am trying to use SimpleMDE Markdown Editor in livewire + alpineJs

inBlade:

<div
    x-data="{
        init() {
            let editor = new SimpleMDE({ element: this.$refs.editor })
            editor.value(this.value)
            editor.codemirror.on('change', () => {
                this.value = editor.value()
            })
        },
    }"
    class="prose w-full"
>
<form wire:submit.prevent="save">
    <input type="text" name="title"   wire:model="title" >
    <textarea x-ref="editor"  " wire:model="description" ></textarea>
</form>
</div>

simpleMDE now loaded

But after submit, the description returns null.

what is the problem? Please guide me.

tisuchi

3 years ago

Level 70

@shimana It looks like the problem might be that you're initializing the SimpleMDE editor on an AlpineJS x-data block, but you're not binding the value property of the textarea to the description Livewire property.

Try adding x-bind:value="description" to your <textarea> element, so that it looks like this:

<textarea x-ref="editor" x-bind:value="description" wire:model="description"></textarea>

This way, when the textarea's value changes, it will also update the description property, which Livewire is listening to.

Also make sure that you are importing the SimpleMDE javascript and css in your blade file and also check if the SimpleMDE javascript is loaded before your AlpineJs script.

1 like

shimana

3 years ago

Level 1

@tisuchi thanks you.

Also make sure that you are importing the SimpleMDE javascript and css in your blade file and also check if the SimpleMDE javascript is loaded before your AlpineJs script.

Yes, I am sure.

now using x-bind:value="description" But it still doesn't work.

webrobert

3 years ago

Best Answer

Level 51

<div x-data="{ description : @entangle('description').defer }"
     class="prose w-full"
     x-init='
        $nextTick(() => {
            let editor = new SimpleMDE({
                element: $refs.editor,
                initialValue: description
             });
             editor.codemirror.on("change", function(){
                description = editor.value()
            })
        })
    '>
    <form wire:submit.prevent="save">
        <input type="text" name="title" wire:model.defer="title" >
        <textarea x-ref="editor" x-model="description"></textarea>
        <button type="submit">see changes</button>
    </form>
</div>

2 likes

shimana

3 years ago

Level 1

@webrobert Thanks 🙏🙏

It works great

My problem was solved with your help.

2 likes

Please or to participate in this conversation.