wygiwys editor examples with laravel livewire

wygiwys-editor.examples.md

Working WYGIWYS editor examples for Livewire 2

As a reference for questions I've answered on Laracasts for how to get WYGIWYS editors working....

Trix

// components/input-rich-text.blade.php
@props(['initialValue' => ''])

<div x-data="{ content: @entangle($attributes->wire('model')).defer }">
    <input type="hidden" id="x" value="{{ $initialValue }}" />
    <div wire:ignore 
         @trix-change="content = $event.target.value" 
         @trix-attachment-add="attachmentAdd">
        <trix-editor input="x" {{ $attributes->merge(['class' => 'p-2']) }}></trix-editor>
    </div>
</div>

// usage
<x-input-rich-text wire:model.defer="description" id="message" :initial-value="$body">

SimpleMDE and similar

<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>

Summernote

<form wire:submit.prevent="save">
    <div wire:ignore>
        <textarea id="summernote" name="editordata" wire:model="description"></textarea>
        <script>
            $(document).ready(function() {
                $('#summernote').summernote();
            });
            // not my favorite solution it sends a request every change. 
            // I dont use summernote. so if you have a refinement that waits let me know.
            $('#summernote').on('summernote.change', function(we, contents, $editable) {
                @this.set('description', contents);
            });
        </script>
    </div>
    <button type="submit">see changes</button>
</form>