hillbilisim / nova-key-value-with-tinymce
这个Nova包允许您在文本区域使用TinyMCE编辑器。您可以自定义编辑器选项,并且...您可以上传图片到您的服务器,并直接在文本中放置它们,而无需离开文本编辑器!
Requires
- php: ^7.3|^8.0|^8.1
- laravel/nova: ~4.0
This package is auto-updated.
Last update: 2024-09-16 23:47:56 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');