Livewire with Medium Editor

#1

I am trying to submit input fields including a textarea but unable to retrieve value from the textarea when wysiwyg medium editor is enabled on the same. FYI i am new to livewire and alphine but trying…

Here is my livewire blade code

...
<textarea wire:model.defer="content.about.description" class="editable form__description" wire:ignore></textarea>
...
...
<button wire:click="submit" type="button" class="form__submit mt-3">Submit</button>
...

JS code to init Medium editor

    var editor = new MediumEditor('.editable');

YES, I have the latest version. Any ideas??
This is how my Inspect console looks like with medium editor class “editiable” is added.

Screen Shot 2020-11-09 at 12.29.16 AM
Screen Shot 2020-11-09 at 12.29.16 AM1598×330 93 KB

#2

It Worked! :partying_face:Never thought it would be this simple! :nerd_face::star_struck::astonished: Thanks @snapey :+1::pray::raised_hands:

Livewire component

...
<div class="form-group" wire:ignore>
    <label class="col-form-label">Description</label>
    <textarea wire:model.defer="content.about.description" class="editable form__description">
        {!! $content['about']['description'] !!}
    </textarea>
</div>
...

JavaScript code

var editor = new MediumEditor('.editable');
editor.subscribe('editableInput', function (event, editable) {
    @this.set('content.about.description', editor.getContent());
});

With this working now I could easily recommend Medium Editor as a perfect WYSIWYG editor for Livewire projects.