In my last project i need and wysiwyg editor and a fast development environment. I want try kdion form package but there is not and implementation for this kind of fields.
I've made a simple class to extend the functionality of the package and other stuffs that i will describe:
First the class, I called AcheFormComponent.
<?php
namespace App\Http\Livewire;
// use Kdion4891\LaravelLivewireForms\FormComponent;
use Kdion4891\LaravelLivewireForms\Field;
use Kdion4891\LaravelLivewireForms\FormComponent;
class AcheFormComponent extends FormComponent {
protected $listeners = [
'fileUpdate',
'save' => 'hsubmitform'];
public function hsubmitform()
{
$this->submit();
$this->saveAndGoBackResponse();
}
public function render()
{
// my custom code
return $this->formView();
}
}
With this we can intercept the submit method (using $emit)
We also change the form template in resources/views/vendor/laravel-livewire-forms/form.blade.php (note that i'm using Sweet Alert2 form confirmation and alerts)
<div>
<div class="card">
<div class="card-body">
@foreach($fields as $field)
@if($field->view)
@include($field->view)
@else
@include('laravel-livewire-forms::fields.' . $field->type)
@endif
@endforeach
<div class="row">
<div class="col-md offset-md-2">
<button class="btn btn-primary" id="bsave" onclick="asave()">{{ __('Save') }} </button>
{{-- <button class="btn btn-primary" wire:click="saveAndGoBack">{{ __('Save & Go Back') }}</button> --}}
<a href="{{ url()->previous() }}" class="btn btn-primary">Cancelar</a>
</div>
</div>
</div>
</div>
</div>
@push('scripts')
<script>
// Code is inspired by Pastor Ryan Hayden
// https://github.com/livewire/livewire/issues/106
// Thank you, sir!
function asave(){
var x = document.getElementsByClassName('quillh') ;
// take all quill editor in page and put the data in hidden fields.
var canti = 0;
if (x.length>0){
for(i=0;i<x.length ; i++) {
var xid = x[i].id.replace('quillh','quill');
window[xid].blur()
canti++ ;
}
}
Swal.fire({
title: 'Save the form ?',
text: "We will save form data.",
showCancelButton: true,
focusConfirm:true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Save!'
}).then((result) => {
if (result.value) {
window.livewire.emit('save'); // emit the save value to fire the hsubmitform event
}
})
}
document.addEventListener('DOMContentLoaded', function () {
document.querySelectorAll('input[type="file"]').forEach(file => {
file.addEventListener('input', event => {
let form_data = new FormData();
form_data.append('component', @json(get_class($this)));
form_data.append('field_name', file.id);
for (let i = 0; i < event.target.files.length; i++) {
form_data.append('files[]', event.target.files[i]);
}
axios.post('{{ route('laravel-livewire-forms.file-upload') }}', form_data, {
headers: {'Content-Type': 'multipart/form-data'}
}).then(response => {
window.livewire.emit('fileUpdate', response.data.field_name, response.data.uploaded_files);
});
})
});
});
</script>
@endpush
Finally we must place the textareaeditor component in resources/views/fields/textareaeditor.blade.php
<div class="form-group row">
<label for="{{ $field->name }}" class="col-md-2 col-form-label text-md-right">
{{ $field->label }}
</label>
<div class="col-md">
<input
id="{{ $field->name }}"
type="HIDDEN"
class="form-control @error($field->key) is-invalid @enderror"
autocomplete="{{ $field->autocomplete }}"
placeholder="{{ $field->placeholder }}"
wire:model.lazy="{{ $field->key }}"/>
<div class="mt-2 bg-white quillh" id="quillh{{$field->name}}" wire:ignore>
<div
x-data
x-ref="quillEditor{{$field->name}}"
x-init="
quill{{$field->name}} = new Quill($refs.quillEditor{{$field->name}}, {theme: 'snow' });
quill{{$field->name}}.root.innerHTML = @this.get('form_data').{{$field->name}}
quill{{$field->name}}.on('selection-change', function(range, oldRange, source) {
//console.log(range )
//console.log( oldRange)
if (( range === null && oldRange !== null) || (range === null && oldRange == undefined )) {
console.log('tocado' + quill{{$field->name}}.root.innerHTML);
$dispatch('input',quill{{$field->name}}.root.innerHTML);
@this.set('form_data.{{$field->name}}', quill{{$field->name}}.root.innerHTML) ;
}
});
"
>
Loading ...
</div>
</div>
@include('laravel-livewire-forms::fields.error-help')
</div>
</div>
@pushonce('styles')
<link href="{{asset('/js/quill/quill.snow.css') }}" rel="stylesheet">
@endpushonce
@pushonce('scripts')
<script src="{{asset('/js/quill/quill.js')}}"></script>
@endpushonce
You must to put quill css and js in /public/js .
After all the class and blade things we can call the new textareaeditor input type
...
Field::make('Large Html TEXT', 'texthtml')->view('fields.textareaeditor')->help('use the quill editor'),
...
You can even use multiple editor on the same form.
The kdion package is a great tool for make lavarel/livewire forms. But the development is stopped and there are several issues without resolution. I hope this will work for some developers who are using the package.
I'm developping a kdion table package fork too. If you are insterested let me know.
Top comments (2)
check this : github.com/tanthammar/tall-forms
ported from kdion with alpine integration
Thanks