ycs77 / laravel-form-builder-fields
This Laravel form builder's more fields.
Installs: 85
Dependents: 0
Suggesters: 0
Security: 0
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Language:JavaScript
Requires
- php: >=7.1
- kris/laravel-form-builder: ^1.16
Requires (Dev)
- mockery/mockery: ^1.3
- orchestra/testbench: ~3.0
- phpunit/phpunit: >=7.0
README
Install
Laravel form builder must be installed.
Via Composer
composer require ycs77/laravel-form-builder-fields
Types
- Checkable group type
- Rich editor type
Checkable group type
The checkable group type is similar to the choice type, but it is difrence.
php artisan vendor:publish --tag=laravel-form-builder-checkable-group-type
# or horizontal
php artisan vendor:publish --tag=laravel-form-builder-checkable-group-type-horizontal
Set config:
config/laravel-form-builder.php
<?php return [ // Templates // ... 'checkable_group' => 'laravel-form-builder::checkable_group', 'custom_fields' => [ 'checkable_group' => '\Ycs77\LaravelFormBuilderFields\Fields\CheckableGroupType', ], ];
Use checkable group:
$this->add('field_name', 'checkable_group', [ 'choices' => [ 'en' => 'English', 'fr' => 'French', ], 'is_checkbox' => true, // False is radio 'selected' => ['en'], 'language_name' => 'test-lang-name', // 'choice_options' => [ // 'wrapper' => [ // 'class' => 'form-control', // ], // ], ]);
If you set language_name
in the form but don't want to use it in the checkable group, you can set it to false
:
$this->add('field_name', 'checkable_group', [ ... 'language_name' => false, ]);
Style class config
Use bootstrap 4 class:
config/laravel-form-builder.php
<?php return [ 'defaults' => [ // ... 'checkable_group' => [ // 'wrapper_class' => 'form-group', ], 'checkbox' => [ // ... 'choice_options' => [ 'wrapper_class' => 'custom-control custom-checkbox', 'label_class' => 'custom-control-label', 'field_class' => 'custom-control-input', ], ], 'radio' => [ // ... 'choice_options' => [ 'wrapper_class' => 'custom-control custom-radio', 'label_class' => 'custom-control-label', 'field_class' => 'custom-control-input', ], ], ], ];
Or horizontal style:
config/laravel-form-builder.php
<?php return [ 'defaults' => [ // ... 'checkable_group' => [ 'label_class' => 'col-lg-2 col-form-label text-lg-right pt-0', ], // Same... ], ];
Rich editor type
This rich editor default use TinyMCE, you can replace it.
php artisan vendor:publish --tag=laravel-form-builder-rich-editor-type
Set config:
config/laravel-form-builder.php
<?php return [ // Templates // ... 'rich_editor' => 'laravel-form-builder::rich_editor', 'custom_fields' => [ 'rich_editor' => '\Ycs77\LaravelFormBuilderFields\Fields\RichEditorType', ], ];
Use rich editor:
$this->add('content', 'rich_editor');
Download the TinyMCE Language Packages
Purify rich editor content
Install HTMLPurifier for laravel package:
composer require mews/purifier
Use to your controller:
<?php namespace App\Http\Controllers; use Illuminate\Http\Request; use Mews\Purifier\Facades\Purifier; class PostController extends Controller { public function store(Request $request) { $content = Purifier::clean($request->content); } }
Upload image
Before you start, you must set
config('app.url')
andconfig('filesystems.default')
.
The image default will be uploaded to /upload
. Add upload routes to routes/web.php:
<?php use Ycs77\LaravelFormBuilderFields\Facades\RichEditorUpload; // Other routes... RichEditorUpload::routes();
Open upload image on rich editor:
$this->add('content', 'rich_editor', [ 'upload_image' => true, ]);
Language settings:
resources/lang/{Language}/validation.php
'custom' => [ 'upload_file' => [ 'required' => 'Upload file does not exist', ], ], 'attributes' => [ 'upload_file' => 'Upload file', ],
resources/lang/{Language}.json
{ "Upload error": "Upload error" }
If you want to modify the upload feature, you can extends Ycs77\LaravelFormBuilderFields\Http\Controllers\UploadController
to modified:
<?php namespace App\Http\Controllers; use Ycs77\LaravelFormBuilderFields\Http\Controllers\UploadController as BaseUploadController; class UploadController extends BaseUploadController { // ... }