README

这是 Laravel Nova 的 Toast UI Editor 字段。

内容

安装
使用
高级使用
变更日志
安全
贡献
鸣谢
许可证

安装

您可以通过 composer 安装此包。

composer require bbs-lab/nova-toast-ui-editor-field

包将自动注册自己。

您可以使用以下命令发布配置文件：

php artisan vendor:publish --provider="BbsLab\NovaToastUiEditorField\FieldServiceProvider" --tag="config"

这是已发布配置文件的内容

<?php

declare(strict_types=1);

use BbsLab\NovaToastUiEditorField\Enums\ToastUiEditType;
use BbsLab\NovaToastUiEditorField\Enums\ToastUiPreviewStyle;

return [
    'allowIframe' => (bool) env('TOAST_UI_EDITOR_ALLOW_IFRAME', false),

    'height' => env('TOAST_UI_EDITOR_HEIGHT', 'auto'),

    'hideModeSwitch' => (bool)env('TOAST_UI_EDITOR_HIDE_MODE_SWITCH', false),

    'initialEditType' => env('TOAST_UI_EDITOR_INITIAL_EDIT_TYPE', ToastUiEditType::WYSIWYG->value),

    'language' => env('TOAST_UI_EDITOR_LANGUAGE', 'en-US'),

    'minHeight' => env('TOAST_UI_EDITOR_MIN_HEIGHT', '300px'),

    'plugins' => ['chart', 'tableMergedCell', 'uml', 'colorSyntax', 'codeSyntaxHighlight'],

    'previewStyle' => env('TOAST_UI_EDITOR_PREVIEW_STYLE', ToastUiPreviewStyle::TAB->value),

    'toolbarItems' => [
        [
            'heading',
            'bold',
            'italic',
            'strike',
        ],
        [
            'hr',
            'quote',
        ],
        [
            'ul',
            'ol',
            'task',
            'indent',
            'outdent',
        ],
        [
            'table',
            'image',
            'link',
        ],
        [
            'code',
            'codeblock',
        ],
    ],

    'usageStatistics' => (bool)env('TOAST_UI_EDITOR_USAGE_STATISTICS', false),

    'useCloudinary' => (bool) env('TOAST_UI_EDITOR_USE_CLOUDINARY', false),

    'cloudinary' => [
        'cloud_name' => env('CLOUDINARY_CLOUD_NAME', ''),
        'api_key' => env('CLOUDINARY_API_KEY', ''),
        'api_secret' => env('CLOUDINARY_API_SECRET', ''),
        'username' => env('CLOUDINARY_USERNAME', ''),
    ],

    'useCommandShortcut' => (bool)env('TOAST_UI_EDITOR_USE_COMMAND_SHORTCUT', true),
];

使用

您可以在 Nova 资源中使用 BBSLab\NovaToastUiEditorField\ToastUiEditor 字段。

<?php

namespace App\Nova;

use BBSLab\NovaToastUiEditorField\ToastUiEditor;
use Illuminate\Http\Request;

class BlogPost extends Resource
{
    // ...
    
    public function fields(Request $request)
    {
        return [
            // ...

            ToastUiEditor::make('Content'),

            // ...
        ];
    }
    
}

重要

该字段将在数据库中存储 markdown 内容。

高级使用

依赖字段

您可以使用 dependsOn 方法根据其他字段的值有条件地显示字段。以下是一个示例

<?php

declare(strict_types=1);

namespace Workbench\App\Nova;

use BbsLab\NovaToastUiEditorField\Enums\ToastUiEditType;
use BbsLab\NovaToastUiEditorField\Enums\ToastUiLanguage;
use BbsLab\NovaToastUiEditorField\ToastUiEditor;
use Laravel\Nova\Fields\Boolean;
use Laravel\Nova\Fields\FormData;
use Laravel\Nova\Fields\ID;
use Laravel\Nova\Fields\Text;
use Laravel\Nova\Http\Requests\NovaRequest;

class Post extends Resource
{
    public static $model = \Workbench\App\Models\Post::class;

    public static $title = 'title';

    public static $search = [
        'id', 'title',
    ];

    public function fields(NovaRequest $request): array
    {
        return [
            ID::make()->sortable(),

            Text::make('Title')
                ->sortable()
                ->rules('required', 'max:255'),

            Boolean::make('Has Content')
                ->sortable()
                ->rules('required'),

            ToastUiEditor::make('Content')
                ->rules('nullable')
                ->fullWidth()
                ->hide()
                ->dependsOn('has_content', function (ToastUiEditor $field, NovaRequest $request, FormData $formData) {
                    if ($formData->has_content) {
                        $field
                            ->show()
                            ->rules('required');
                    } else {
                        $field->hide();
                    }
                }),
        ];
    }
}

提示

有关依赖字段的更多信息，请参阅官方文档。

Toast UI Editor 配置

您可以使用以下字段方法配置底层的 Toast UI Editor 实例。查看Toast UI - Vue Editor 文档。

注意

您也可以在配置文件中配置默认值。

height(string $height)
hideModeSwitch(bool $hideModeSwitch = true)
initialEditType(ToastUiEditType $editType)
language(ToastUiLanguage $language)
minHeight(string $minHeight)
plugins(array $plugins)
previewStyle(ToastUiPreviewStyle $previewStyle)
toolbarItems(array $toolbarItems)
usageStatistics(bool $usageStatistics = true)
useCommandShortcut(bool $useCommandShortcut = true)

允许 markdown/html 中的 iframe

allowIframe(bool $allowIframe = true)

使用 Cloudinary 作为图片选择器

useCloudinary(bool $useCloudinary = true)

重要

您必须按照 nova-toast-ui-editor-field 配置文件中描述的方式配置您的 Cloudinary 凭据。

变更日志

有关最近更改的更多信息，请参阅变更日志。

安全

如果您发现任何与安全相关的问题，请通过电子邮件paris@big-boss-studio.com而不是使用问题跟踪器来报告。

bbs-lab / nova-toast-ui-editor-field

维护者

详细信息