hillbilisim/nova-key-value-with-tinymce

这个Nova包允许您在文本区域使用TinyMCE编辑器。您可以自定义编辑器选项,并且...您可以上传图片到您的服务器,并直接在文本中放置它们,而无需离开文本编辑器!

v1.1.5 2024-07-16 23:29 UTC

README

这个Nova包允许您使用 TinyMCE编辑器 对文本区域进行编辑。您可以自定义编辑器选项,并且...您可以 上传图片到您的服务器 并直接在内容中放置它们,而无需离开文本编辑器!! 编辑器

安装

(向下兼容)

composer require hillbilisim/nova-key-value-with-tinymce

运行以下命令,发布TinyMCE JavaScript和CSS资产。

php artisan vendor:publish --provider="HillTech\NovaKeyValueTinyMCE\FieldServiceProvider"

用法

在您的Nova资源中添加use声明并使用NovaTinyMCE字段

use HillTech\NovaKeyValueTinyMCE\NovaKeyValueTinyMCE;

// ...

    /**
     * Get the fields displayed by the resource.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return array
     */
    public function fields(Request $request)
    {
        return [
            ID::make()->sortable(),

            NovaKeyValueTinyMCE::make('body'),
        ];
    }

默认情况下,编辑器包含一些基本选项和图像管理(仅作为链接插入)。

您可以使用如下自定义选项

NovaTinyMCE::make('body')->options([
                'plugins' => [
                    'lists','preview','anchor','pagebreak','image','wordcount','fullscreen','directionality'
                ],
                'toolbar' => 'undo redo | styles | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | image | bullist numlist outdent indent | link'
            ]),

使用LFM上传图片

现在如果您需要从文本编辑器上传图片,我们需要安装 UniSharp Laravel Filemanager 并将 use_lfm => true 选项传递到您的选项数组中

NovaTinyMCE::make('body')->options([
                'plugins' => [
                    'lists','preview','anchor','pagebreak','image','wordcount','fullscreen','directionality'
                ],
                'toolbar' => 'undo redo | styles | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | image | bullist numlist outdent indent | link',
                'use_lfm' => true
            ]),

只有如果您使用laravel-filemanager v1

如果您使用LFM v1,最后一步是运行此命令来修复一些文件管理器文件

php artisan nova-tinymce:support-lfm

最后,您需要更新 lfm_url 键以匹配旧版本URL,如下所示 lfm_url' => 'laravel-filemanager

重要:如果您在laravel 6中使用laravel-filemanager v1,您将需要导入辅助库,因为遗留的文件管理器需要它们: composer require laravel/helpers

可选配置

Laravel Filemanager URL

可选,如果您 更改laravel-filemanager URL 在包配置文件中(config/lmf.php),您需要将此信息传递给此nova字段,通过选项数组中的 lfm_url 键。

// ...
    'use_lfm' => true,
    'lfm_url' => 'my-custom-filemanager-url'
// ...

覆盖配置文件

如果您有一个默认的 options 数组,每次实例化 NovaTinyMCE 字段时都要加载,您可以可选地发布配置文件并覆盖 default_options 数组

php artisan vendor:publish --provider="HillTech\NovaKeyValueTinyMCE\FieldServiceProvider" --tag="config"

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

<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Default Options
    |--------------------------------------------------------------------------
    |
    | Here you can define the options that are passed to all NovaTinyMCE
    | fields by default.
    |
    */

    'default_options' => [
        'content_css' => '/vendor/tinymce/skins/ui/oxide/content.min.css',
        'skin_url' => '/vendor/tinymce/skins/ui/oxide',
        'path_absolute' => '/',
        'plugins' => [
            'lists','preview','anchor','pagebreak','image','wordcount','fullscreen','directionality'
        ],
        'toolbar' => 'undo redo | styles | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | image | bullist numlist outdent indent | link',
        'relative_urls' => false,
        'use_lfm' => false,
        'lfm_url' => 'filemanager'
    ],
];

插件定制

您可以将javascript SDK的任何配置选项传递给options()方法中的数组。

例如,如果您想增加文本区域的高度

            NovaTinyMCE::make('body')->options([
                'height' => '980'
                ]),

您可以在文档中查看完整的参数列表:https://www.tiny.cloud/docs/configure/

在属性属性上使用JSON语法

如果您在属性名称上使用JSON语法,TinyMCE将不会初始化,因为默认的id将是一个无效的HTML id属性。为了解决这个问题,您可以定义一个自定义的id。例如

    NovaKeyValueTinyMCE::make('Value', 'text->en')->id('custom-id');