WYSIWYG

1Wysiwyg::make()
2    ->name('case_study')
3    ->toolbarOptions([ [ 'header' => [1, 2, false] ], 'ordered', 'bullet' ])
4    ->maxLength(200)
5    ->note('Some note')

 1<x-twill::wysiwyg
 2    name="case_study"
 3    :label="twillTrans('Case study text')"
 4    :placeholder="twillTrans('Case study placeholder')"
 5    :maxlength="200"
 6    :note="twillTrans('Help text')"
 7/>
 8 
 9<x-twill::wysiwyg
10    name="case_study"
11    :label="twillTrans('Case study text')"
12    :toolbar-options="[ [ 'header' => [1, 2, false] ], 'ordered', 'bullet' ]"
13    :placeholder="twillTrans('Case study placeholder')"
14    :edit-source="true"
15    :translated="true"
16    :maxlength="200"
17    :note="twillTrans('Help text')"
18/>

 1@formField('wysiwyg', [
 2    'name' => 'case_study',
 3    'label' => 'Case study text',
 4    'placeholder' => 'Case study text',
 5    'maxlength' => 200,
 6    'note' => 'Hint message',
 7])
 8 
 9@formField('wysiwyg', [
10    'name' => 'case_study',
11    'label' => 'Case study text',
12    'toolbarOptions' => [ [ 'header' => [1, 2, false] ],
13    'placeholder' => 'Case study text',
14    'maxlength' => 200,
15    'editSource' => true,
16    'note' => 'Hint message',
17])

By default, the WYSIWYG field is based on Tiptap.

You can configure the toolbar if needed.

For example, this configuration will render the default toolbar.

 1@php
 2$wysiwygOptions = [
 3    ['header' => [2, 3, 4, 5, 6, false]],
 4    'bold',
 5    'italic',
 6    'underline',
 7    'strike',
 8    'blockquote',
 9    "code-block",
10    'ordered',
11    'bullet',
12    'hr',
13    'code',
14    'link',
15    'clean',
16    'table',
17];
18@endphp
19 
20<x-twill::wysiwyg
21    name="case_study"
22    :label="twillTrans('Case study text')"
23    :toolbar-options="$wysiwygOptions"
24    :placeholder="twillTrans('Case study placeholder')"
25    :edit-source="true"
26    :maxlength="200"
27    :note="twillTrans('Help text')"
28/>

Note that Quill outputs CSS classes in the HTML for certain toolbar modules (indent, font, align, etc.), and that the image module is not integrated with Twill's media library. It outputs the base64 representation of the uploaded image. It is not a recommended way of using and storing images, prefer using one or multiple medias form fields or blocks fields for flexible content. This will give you greater control over your frontend output.

A migration to save a wysiwyg field would be:

 1Schema::table('articles', function (Blueprint $table) {
 2    ...
 3    $table->text('case_study')->nullable();
 4    ...
 5 
 6});
 7// OR
 8Schema::table('article_translations', function (Blueprint $table) {
 9    ...
10    $table->text('case_study')->nullable();
11    ...
12});

When used in a block, no migration is needed.

# Advanced Tiptap usage

With the Tiptap wysiwyg editor you can access some additional features. Below is a more detailed explanation.

# Link browser

When needed, you can let users browse internal content, this can be especially useful to maintain correct links inside wysiwyg editors.

This can currently only be done using the Form builder by adding the browsermodules to the wysiwyg field:

1Wysiwyg::make()->name('description')
2    ->label('Description')
3    ->translatable()
4    ->browserModules([Page::class])

Instead of taking the slug to the content during the time of writing the content, it let's you render the url during render time.

When selecting a piece of content it will link it as such: href="#twillInternalLink::App\Models\Page#1"

This will then be replaced during render time if you are using the $block->wysiwyg('field') or $block->translatedWysiwyg('field') helpers.

You can customize the url by implementing the getFullUrl method on your model class.

For regular fields on models you will have to manually call parseInternalLinks like this:

1{{ \A17\Twill\Facades\TwillUtil::parseInternalLinks($item->description) }}