README

Nova TinyMCE 5 Editor 是一个集成 TinyMCE5 WYSIWYG 编辑器的 Laravel Nova 字段。

安装

使用 composer 安装此包。

composer require kraftbit/nova-tinymce5-editor

使用方法

使用以下命令发布配置

php artisan vendor:publish --provider="Kraftbit\NovaTinymce5Editor\FieldServiceProvider"

现在你已经在配置文件夹中有 nova-tinymce5-editor.php 文件。在这里编辑 TinyMCE 选项和工具栏。

在这里添加你的 TinyMCE 云 API 密钥，或者像这样添加到 .env 文件中

TINYMCE_API_KEY=your-key-here

之后，你就可以开始使用了！将 NovaTinymce5Editor 类和字段添加到你的 Nova 资源中。

use Kraftbit\NovaTinymce5Editor\NovaTinymce5Editor;

...

NovaTinymce5Editor::make('Body', 'body'),

可用选项

你可以直接从字段传递参数和 TinyMCE 选项来自定义工具栏和插件，如下所示

NovaTinymce5Editor::make('Body')->placeholder('Enter content here')
->options(['toolbar' => ['undo redo | align | link | code'], 'plugins' => ['link code']]),

有关可用选项/插件的详细信息，请访问官方 TinyMCE 5 文档。

与媒体库集成

Nova TinyMCE 5 Editor 字段与 Nova Media Library 工作良好。如果你希望直接从媒体库插入图像到编辑器内容，首先需要安装 Nova Media Library 字段，并添加一个媒体库 JS 回调字段。为了让它工作，你需要为 TinyMCE 字段添加自定义 *id（例如 ->id('body')），并添加 meta 参数 ->withMeta(['mediaLibrary' => true])，然后将相同的编辑器 *id 传递到你的媒体库回调字段。在下面的示例中，我们使用 'body' 作为 *id，因为这是我们的数据库中的列名

NovaTinymce5Editor::make('Body')->id('body')->withMeta(['mediaLibrary' => true]),

MediaLibrary::make('Insert image', 'js_callback_media_library')
->jsCallback('mediaLibrarySelectFiles', ['editor' => 'body'])->types(['Image']),

截图

未插入图像的 TinyMCE 编辑器

插入图像的 TinyMCE 编辑器

图像文件选项

贡献

欢迎拉取请求。对于主要更改，请先打开一个问题来讨论你想要更改的内容。

许可

MIT