WYSIWYG Fields

---

You will need two columns

WYSIWYG fields require two database columns. For example: content and content_json.

The content field will contain the resulting HTML and can be output directly on the frontend. The content_json stores the raw JSON data from the Quill text editor.

Example Migration

$table->json('content_json');
$table->text('content');

Sanitisation

HTMLPurifier will do things like automatically add p tags. You can customise that behaviour.

Validation

You can use the wysiwyg_required validation rule if the field is required.

You should also add a custom message so that this makes sense to the user.

$this->
    ->rules([
        'main.wysiwyg_field' => 'wysiwyg_required',
    ])
    ->messages([
        'main.wysiwyg_field.wysiwyg_required' => 'You need to fill in that wysiwyg field.'
    ])

Customisation

Theme

You can change the Quill editor theme.

$field = new WysiwygField('wysiwyg');

// Set the theme
$field->theme('bubble')
$field->setTheme('bubble')

// Get the theme
$field->theme() // 'bubble'
$field->getTheme() // 'bubble'

The default value is 'snow'. 'bubble' is also available though not fully supported yet - you may have issues if using it in flexible content fields.

You can add extra custom themes if needed but you will need to manually include the appropriate CSS file.

Modules

You can customise which modules the Quill editor will use.

Default:

[
    'toolbar' => [
        [['header' => [1, 2, 3, 4, 5, 6, false]]],
        ['blockquote', 'code-block'],
        ['bold', 'italic', 'underline', 'strike', 'link'],
        [[ 'align' => [] ]],
        [[ 'color' => [] ], [ 'background' => [] ]],
        ['clean'],
    ],
]

Currently you can only set the modules array as a whole, there are no helper functions for setting/adding/removing parts of it. Therefore you probably want to either set the whole array yourself, or get the array, alter it and then set it.

$modules = $field->getModules();

// Set toolbar to only include bold and italic buttons
$modules['toolbar'] = [['bold', 'italic']];

$field->setModules();

Formats

You can customise the "formats" are allowed in the editor.

Similarly to Modules this can only be set as a whole array.

$field = new WysiwygField('wysiwyg');

// Set formats
$field->formats(['bold', 'italic']);
$field->setFormats(['bold', 'italic']);

// Get formats
$field->formats();
$field->getFormats();