TiptapEditor

Plnohodnotný rich text editor postavený na TipTap / ProseMirror. Konfigurovatelný toolbar, volitelná rozšíření (tabulky, obrázky, zarovnání textu, zvýraznění) a HTML nebo JSON výstup.

use NyonCode\WireForms\Components\TiptapEditor;

Nastavení

Žádné. JavaScript editoru se dodává předbundlovaný uvnitř balíčku a Blade pohled pole ho automaticky injektuje. Žádný npm install, žádný build krok a žádný app.js import — jen použijte pole a funguje hned.

Editor je code-split: základní bundle (jádro TipTapu + vždy zapnutá rozšíření) se servíruje na /wire-forms/tiptap/tiptap-editor.js, a volitelná rozšíření (withTables() / withImages() / withHighlight() / withTextAlign()) jsou v samostatném addon bundlu, který se načte jen když je nějaké pole na stránce zapne. Oba sdílejí jeden chunk s jádrem, takže stránka bez těchto rozšíření stáhne méně a zapnutí tabulek nikdy neposílá druhou kopii jádra editoru. Script tagy <script type="module"> se injektují jednou za stránku přes Livewire direktivu @assets; registrují Alpine komponentu tiptapEditor, na kterou pohled spoléhá (Alpine se dodává s Livewire).

Publikování assetu (volitelné). Pokud dáváte přednost servírování souborů přes vlastní asset pipeline/CDN, publikujte je pomocí:

php artisan vendor:publish --tag=wire-forms::assets

To zkopíruje bundly do public/vendor/wire-forms/.

Přispěvatelé. Bundly se generují z packages/forms/resources/js/tiptap-editor.js a tiptap-editor-addons.js a commitují (se sdíleným chunkem) do packages/forms/dist/tiptap/. Po editaci zdroje je přebuildujte pomocí:

npm run build:forms-assets

Základní použití

TiptapEditor::make('content')

Vlastní toolbar

TiptapEditor::make('content')
    ->toolbarButtons([
        'bold', 'italic', 'underline',
        '|',
        'h2', 'h3',
        '|',
        'bulletList', 'orderedList',
        '|',
        'link', 'undo', 'redo',
    ])

Použijte '|' jako vizuální oddělovač mezi skupinami.

Znepřístupnit konkrétní tlačítka

TiptapEditor::make('content')
    ->disableToolbarButtons(['codeBlock', 'code'])

Bez toolbaru

TiptapEditor::make('content')
    ->disableAllToolbarButtons()

Rozšíření

Zapínejte volitelná rozšíření jednotlivě:

TiptapEditor::make('content')
    ->withTables()       // vkládání + editace tabulek
    ->withImages()       // vkládání obrázků (přes URL prompt)
    ->withTextAlign()    // tlačítka zarovnání left / center / right
    ->withHighlight()    // tlačítko zvýraznění textu

Když je rozšíření zapnuto, jeho toolbarové tlačítko se přidá automaticky.

Formát výstupu

// Výchozí: HTML řetězec uložený v modelu
TiptapEditor::make('body')->outputHtml()
 
// Uložit jako TipTap JSON dokument (serializovaný jako JSON řetězec)
TiptapEditor::make('body')->outputJson()

Limit znaků

TiptapEditor::make('summary')
    ->maxLength(2000)    // zobrazí živé počítadlo, vynuceno rozšířením CharacterCount

Výška

TiptapEditor::make('content')
    ->minHeight(400)     // minimální výška v pixelech (výchozí 240)

Read-only / disabled

TiptapEditor::make('content')
    ->readOnly()
    ->disabled(fn () => ! $this->canEdit)

Dostupná toolbarová tlačítka

Srovnání s RichEditor

Metody

Label, hint, tooltip a další sdílené metody viz Společné API pole.