Skip to content

Instantly share code, notes, and snippets.

@tanthammar
Last active February 8, 2023 22:18
Show Gist options
  • Save tanthammar/20a70865415f9f84ec4cca054f3b8396 to your computer and use it in GitHub Desktop.
Save tanthammar/20a70865415f9f84ec4cca054f3b8396 to your computer and use it in GitHub Desktop.
Livewire trix input
@push('body-styles')
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/trix/1.2.0/trix.css">
@endpush
<form x-data="form()">
<input x-ref="description" id="description" name="description" value='{{ $description }}' type="hidden" />
<div wire:ignore>
<trix-editor input="description"></trix-editor>
</div>
<input x-ref="info" id="info" name="info" value='{{ $info }}' type="hidden" />
<div wire:ignore>
<trix-editor input="info"></trix-editor>
</div>
<button x-on:click.prevent="save">Save</button>
</form>
@push('scripts')
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/trix/1.2.0/trix.js"></script>
<script>
function form() {
return {
save() {
window.livewire.emit('alpineSave', {
info: this.$refs.info.value,
description: this.$refs.description.value,
});
}
}
}
</script>
@endpush
//livewire component
protected $listeners = ['alpineSave'];
public function alpineSave($array) {
$this->fill([
'info' => data_get($array, 'info'),
'description' => data_get($array, 'description'),
]);
// save the data ...
}
@ighmouraceneb
Copy link

ighmouraceneb commented Dec 19, 2020

I init the array in the mount function and it worked :

   public function mount()
    {
        foreach ($this->fields as $index => $field) {
 
            if($field->field->value === "TextFormattedLongSummary") {
                $this->TextFormattedLongSummary[$index] = "";
            }
        }
    }

the problem is solved with version v2.3.6 of livewire

@mediabeastnz
Copy link

Anyone had issues with not being able to pasting using this setup?

@oladip
Copy link

oladip commented Feb 8, 2023

the upload is not adding up. Initial wire:model does not hold the uploaded image. Any assistant to handle the uploaded images and text together in the same livewire component? Thank you

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment