Components / Editor

Editor

Zinq License Required

This component is part of Zinq Prime and requires a valid license to use.

Upgrade Now

# Usage

Need a rich text editor that won't make your users cry? Our WYSIWYG Editor has got you covered. Built on TipTap, it lets your users create gorgeous content without touching a single HTML tag. Perfect for blog posts, product descriptions, CMS pages and many more.

  
<zinq:editor wire:model="content" />

You don't need to worry about managing JavaScript, CSS, or any other dependencies. Zinq automatically handles all resource loading for the editor component. The best part? These resources are only loaded when you actually use the editor component. If you don't use it on a particular page, no extra scripts are injected, keeping your page load times optimal.

# Toolbar

If you want to customize toolbar, you can simply pass the children to the zinq:editor with your custom-tools or mix them with existing one:

  
<zinq:editor wire:model="content">
    <zinq:editor.tools>
        <zinq:editor.text-align />
        <zinq:editor.separator />
        <zinq:editor.text />
        <zinq:editor.bold />
        <zinq:editor.italic />
        <zinq:editor.underline />
    </zinq:editor.tools>
</zinq:editor>

# Available Tools

Tool Component
Text <zinq:editor.text />
Bold <zinq:editor.bold />
Italic <zinq:editor.italic />
Underline <zinq:editor.underline />
Bullet list <zinq:editor.bullet-list />
Ordered list <zinq:editor.ordered-list />
Text align <zinq:editor.text-align />
Link <zinq:editor.link />
Unlink <zinq:editor.unlink />
Separator <zinq:editor.separator />

# Custom Tools

You can also create your own custom tools by adding a new component. Here is an example of a custom tool that strikethroughs the selected text:

  
<zinq:editor wire:model="content">
    <zinq:editor.tools>
        ...
        <zinq:editor.tool>
            <zinq:editor.button type="button" @click="getEditor().chain().focus().toggleStrike().run()" activeStyles="isActive('strike', updatedAt)">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4"><path d="M16 4H9a3 3 0 0 0-2.83 4"/><path d="M14 12a4 4 0 0 1 0 8H6"/><line x1="4" x2="20" y1="12" y2="12"/></svg>
            </zinq:editor.button>
        </zinq:editor.tool>
        ...
    </zinq:editor.tools>
</zinq:editor>

You can discover official TipTap Extensions page to see more available extensions.

# Height

By default, editor height is set to min-h-48 and it will automatically expand as you type up to max-h-96 . If you want to change this behavior, you can use class prop combined with Tailwind child selectors:

  
<zinq:editor wire:model="content" class="[&_[data-editor-content]]:min-h-[50px] [&_[data-editor-content]]:max-h-[150px]" />