Last active
February 8, 2023 22:18
-
-
Save tanthammar/20a70865415f9f84ec4cca054f3b8396 to your computer and use it in GitHub Desktop.
Livewire trix input
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@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 ... | |
} |
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
Anyone had issues with not being able to pasting using this setup?
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
@tanthammar
@tanthammar
in my case, I generate the inputs automatically. so we can have 0,1,2 ... trix-editor
so in the view I have this
component trix-text :
and in the controller I defined as follows:
in the console I have this error
Apparently @entangle does not support nested arrays