Laravel Filament富文本编辑器如何设置链接在新标签页打开？

1. 自定义链接扩展添加Target选项 #

Filament的RichEditor基于Tiptap实现，默认的Link扩展没有暴露target设置，需自定义扩展添加该选项：

在项目中创建自定义Link扩展类：

<?php

namespace App\Filament\Extensions;

use Filament\Forms\Components\RichEditor\Extensions\Link;

class CustomLink extends Link
{
    protected function configure(): void
    {
        parent::configure();

        // 添加target选择选项
        $this->addNodeViewOption('target', [
            'type' => 'select',
            'label' => '打开方式',
            'options' => [
                '_self' => '当前标签页',
                '_blank' => '新标签页',
            ],
            'default' => '_self',
        ]);
    }
}

2. 在RichEditor中注册自定义扩展 #

在使用RichEditor的表单组件里，替换默认的Link扩展：

use App\Filament\Extensions\CustomLink;
use Filament\Forms\Components\RichEditor;

// 示例：在资源表单中使用
RichEditor::make('content')
    ->extensions([
        CustomLink::make(), // 替换默认的Link扩展
    ])
    ->toolbarButtons([
        // 保留你需要的工具栏按钮，确保包含'link'
        'bold',
        'italic',
        'link',
        'bulletList',
        'orderedList',
        'h2',
        'h3',
        'codeBlock',
        'attachFiles',
        'undo',
        'redo',
    ])

3. 开启源码编辑（可选） #

如果需要直接编辑HTML源码手动设置target="_blank"，可在工具栏中添加sourceCode按钮：

RichEditor::make('content')
    ->toolbarButtons([
        // ...其他按钮
        'sourceCode', // 添加源码编辑按钮
    ])

配置完成后，点击链接按钮会出现打开方式的下拉选择框，选「新标签页」即可自动添加target="_blank"属性；也可通过源码编辑直接修改HTML内容。

内容的提问来源于stack exchange，提问作者Sirish Amatya