Hi Alex,
I wanted to ask if you could make a course on Trix Text Editor by basecamp with Livewire also could you include image upload.
Will really appreciate this bud.
Cheers.
Hello @henry75958,
Here is how I have set it up in one of my projects. I hope this helps.
class TrixFileUploadController extends Controller
{
public function __invoke(Request $request): array
{
$path = $request->attachment->store('trix-attachments', 'public');
$url = Storage::disk('public')->url(tenant()->storagePath().'/'.$path);
return [
'href' => $url,
'url' => $url,
];
}
}
@props(['entangle', 'allowFileUploads' => false])
@push('head')
<link rel="stylesheet" href="https://unpkg.com/trix@2.0.0-alpha.1/dist/trix.css">
<script src="https://unpkg.com/trix@2.0.0-alpha.1/dist/trix.umd.js"></script>
@endpush
<div
wire:ignore
x-data="{ value: @entangle($entangle) }"
x-init="$refs.trix.editor.loadHTML(value)"
x-id="['trix']"
@trix-change="value = $refs.input.value"
@if (!$allowFileUploads) @trix-file-accept.prevent @endif
class="w-full"
>
<input x-ref="input" type="hidden" :id="$id('trix')">
<trix-editor x-ref="trix" :input="$id('trix')" class="prose bg-white"></trix-editor>
</div>
@if (!$allowFileUploads)
<style>
[data-trix-button-group="file-tools"] {
display: none !important;
}
</style>
@else
<script>
addEventListener("trix-attachment-add", async function(event) {
const formData = new FormData();
formData.append("attachment", event.attachment.file);
const setProgress = (progress) => {
event.attachment.setUploadProgress(progress);
};
const setAttributes = (attributes) => {
event.attachment.setAttributes(attributes);
};
let response = await axios.post(
'{{ route('trix-file-upload') }}',
formData, {
onUploadProgress: function(progressEvent) {
const progress = (progressEvent.loaded / progressEvent.total) * 100;
setProgress(progress);
},
},
);
setAttributes(response.data);
});
</script>
@endif
<x-trix-editor entangle="notes" />
In your Livewire component. Make sure to add a corresponding property.
public string $notes = '';
Route::post('/trix-file-upload', TrixFileUploadController::class)
->name('trix-file-upload');
You will need to handle the clean up yourself. It's not hard to do though. See the trix-attachment-remove
hook.
https://github.com/basecamp/trix?tab=readme-ov-file#observing-editor-changes
Cheers Haz, this really helped me.
Thank you very much.
One question though how does the axios work??
Do i have to have the <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
in my header because this is what i do currently.
https://github.com/laravel/laravel/blob/11.x/resources/js/bootstrap.js
npm i axios