Level 122
You probably need to try the approach of adding an event handler for the on blur event
https://github.com/yabwe/medium-editor/blob/master/CUSTOM-EVENTS.md#blur
and send the contents of the text area along with the event.
1 like
Nov 9, 2020
4
Level 5
Medium Editor with Livewire
I am trying to use Medium Editor with Livewire but not able to retrieve the data from the textarea. fyi It works fine without the editor but when i try with it then no data.
<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>
Not sure how to handle this with JavaScript. No, i am not using Alphine.js but could consider if required.
I have played a bit with Trix and Summernote and they work ok with Livewire but have some conflicts with their toolbars. So preference is Medium Editor.
Level 5
It Worked! 🥳Never thought it would be this simple! 🤓🤩😲 Thanks @snapey 👍🙏🙌
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('blur', 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.
Level 122
just be careful you are not trying to sync every keystroke
1 like
Level 1
I was trying to integrate Medium Editor in Livewire project and in this line
@this.set('pageContent', editor.getContent());
Uncaught SyntaxError: Invalid or unexpected token
What has changed? What did I miss?
Please or to participate in this conversation.