Skip to main content

​
Overview

The WYSIWYG (What You See Is What You Get) component provides a rich text editor for your forms using TinyMCE integration. It extends the Textarea component with automatic editor initialization.

​
Basic Usage

<x-forms::wysiwyg
    name="content"
    label="Content"
/>

​
Component Attributes

​
name
string
required
The name attribute for the textarea field
​
label
string
default:""
The label text for the field
​
rows
int
default:"3"
Number of visible text rows in the textarea
​
model
mixed
default:"null"
The Eloquent model to bind values from
​
default
mixed
default:"null"
Default value if no model value exists
​
value
mixed
default:"null"
Explicit value to use (overrides model/default)
​
show-errors
bool
default:"true"
Whether to display validation errors
​
show-label
bool
default:"true"
Whether to display the label
​
placeholder
string
default:""
Placeholder text for the textarea
​
show-placeholder
bool
default:"false"
Whether to show placeholder text
​
required
bool
default:"false"
Whether the field is required
​
inline
bool
default:"false"
Whether to use inline layout (label and input on same row)
​
floating
bool
default:"false"
Whether to use floating label style
​
inline-label-class
string
default:""
Custom CSS class for inline label column
​
inline-input-class
string
default:""
Custom CSS class for inline input column
​
show-js-errors
bool
default:"false"
Whether to display JavaScript validation errors
​
framework
string
default:""
Override the default CSS framework (bootstrap-5, material-admin-26)

​
TinyMCE Integration

The WYSIWYG component automatically initializes TinyMCE editor with the following configuration:

​
Default Plugins

  • autolink - Automatically creates links from URLs
  • link - Insert/edit links
  • lists - Ordered and unordered lists
  • directionality - LTR/RTL text direction
  • code - View/edit HTML source code
  • visualchars - Show invisible characters
  • quickbars - Context toolbar

​
Default Toolbar

undo redo | styles bold italic | bullist numlist | 
alignleft aligncenter alignright alignjustify alignnone |
link unlink | ltr rtl | outdent indent | code

​
JavaScript Integration

The component automatically includes TinyMCE scripts by pushing to the configured stack: 
@pushonce(config('forms.scripts_stack'))
    @include('forms::partials.wysiwyg-script')
@endpushonce

​
Scripts Stack Configuration

Ensure your layout has the scripts stack defined. The default stack name is configured in config/forms.php: 
'scripts_stack' => 'scripts',
In your layout file: 
@stack('scripts')

​
Complete Example

<x-forms::form method="POST" action="{{ route('posts.store') }}">
    <x-forms::wysiwyg
        name="description"
        label="Post Description"
        rows="10"
        required
        placeholder="Enter the post description..."
    />

    <x-forms::button type="submit">
        Save Post
    </x-forms::button>
</x-forms::form>

​
Customizing TinyMCE

To customize the TinyMCE configuration, publish the views: 
php artisan vendor:publish --tag=forms-views
Then modify resources/views/vendor/forms/partials/wysiwyg-script.blade.php: 
<script src="{{ asset('vendors/tinymce/tinymce.min.js') }}" referrerpolicy="origin"></script>
<script type="text/javascript">
    tinymce.init({
        selector: '.wysiwyg',
        menubar: true,  // Enable menubar
        height: 500,    // Set custom height
        plugins: [
            'autolink',
            'link',
            'image',     // Add image plugin
            'lists',
            'table',     // Add table plugin
            'directionality',
            'code',
            'visualchars',
            'quickbars'
        ],
        toolbar: [
            'undo redo | styles bold italic | bullist numlist | ' +
            'alignleft aligncenter alignright | ' +
            'link image table | ltr rtl | outdent indent | code '
        ],
    });
</script>

​
Requirements

Ensure TinyMCE is installed and accessible: 
public/vendors/tinymce/tinymce.min.js
You can include TinyMCE via CDN or install it locally.

Build docs developers (and LLMs) love

Get started for freeTalk to us