README

简介

使用 TinyMCE 插件在 Laravel Nova 中释放创造力，使其内容创建变得轻松，具有用户友好的动态编辑功能。

功能

📷 支持上传图片 (BETA)
🌙 支持暗黑模式
🔀 在 5 或 6 个 TinyMCE 版本之间切换
❌ 可以禁用（通过将 readonly() 传递给 make 方法）

额外功能

重要

需要为 TinyMCE 添加一些功能吗？查看我们的新 * ChatGPT for TinyMCE * 插件！ 🚀🚀🚀

演示 & 屏幕截图

版本控制

此软件包遵循以下版本控制方案

v1.x - TinyMCE 5 或 6
v0.x - TinyMCE 版本 5（已弃用）

先决条件

Laravel >= 9
PHP >= 8.0
Laravel Nova >= 4
TinyMCE API 密钥（在此获取）

如何安装

在 Laravel 安装根目录下运行

composer require murdercode/nova4-tinymce-editor

然后发布配置

php artisan vendor:publish --provider="Murdercode\TinymceEditor\FieldServiceProvider"

在 config/nova_tinymce_editor.php 文件中会出现以下内容（您可以更改默认值）

<?php

return [
    'cloudChannel' => '6', // 5 or 6

    /**
     * Get your API key at https://www.tiny.cloud and put it here or in your .env file
     */
    'apiKey' => env('TINYMCE_API_KEY', ''),

    /**
     * The default skin to use.
     */
    'skin' => 'oxide-dark',

    /**
     * The default options to send to the editor.
     * See https://www.tiny.cloud/docs/configure/ for all available options (check for 5 or 6 version).
     */
    'init' => [
        'menubar' => false,
        'autoresize_bottom_margin' => 40,
        'branding' => false,
        'image_caption' => true,
        'paste_as_text' => true,
        'autosave_interval' => '20s',
        'autosave_retention' => '30m',
        'browser_spellcheck' => true,
        'contextmenu' => false,
        //'images_upload_url' => '/nova-vendor/murdercode/tinymce/upload', // Uncomment to enable image upload
    ],
    'plugins' => [
        'advlist',
        'anchor',
        'autolink',
        'autosave',
        'fullscreen',
        'lists',
        'link',
        'image',
        'media',
        'table',
        'code',
        'wordcount',
        'autoresize',
    ],
    'toolbar' => [
        'undo redo restoredraft | h2 h3 h4 |
                 bold italic underline strikethrough blockquote removeformat |
                 align bullist numlist outdent indent | link anchor table | code fullscreen spoiler',
    ],

    /**
     * Extra configurations for the editor.
     */
    'extra' => [
        'upload_images' => [
            'enabled' => false, // Uncomment to enable
            'folder' => 'images',
            'maxSize' => 2048, // KB
            'disk' => 'public',
        ],
    ],
];

在您的 .env 文件中请添加密钥（在此获取）

TINYMCE_API_KEY=[YOUR_PRECIOUS_PRIVATE_KEY]

请确保您已在 tiny.cloud 账户列表中添加了域名，否则您将收到错误通知消息。

注册字段

在您的 Nova/Resource.php 中添加字段，如下所示

<?php

use Murdercode\TinymceEditor\TinymceEditor;

class Article extends Resource
{
    //...
    public function fields(NovaRequest $request)
    {
        return [
            TinymceEditor::make(__('Content'), 'content')
                ->rules(['required', 'min:20'])
                ->fullWidth()
                ->help(__('The content of the article.')),
        ];
    }
}
                //...

启用图片上传

警告

此功能处于 BETA 测试阶段，可能不稳定或包含错误/安全漏洞。我们提供原样提供，不提供任何保证。因此，默认情况下已禁用。

要启用图片上传，您必须使用以下命令发布配置文件

php artisan vendor:publish --provider="Murdercode\TinymceEditor\FieldServiceProvider"

然后在您的配置文件 config/nova-tinymce-editor.php 中

<?php

// Uncomment the following line
'images_upload_url' => '/nova-vendor/murdercode/tinymce/upload',

// Set the following to true
    'extra' => [
        'upload_images' => [
            'enabled' => false, // Uncomment to enable
            'folder' => 'images',
            'maxSize' => 2048, // KB
            'disk' => 'public',
        ],
    ],

请确保在您的配置文件中启用了 image 插件和工具栏按钮。

保护代码

您可以通过保护内容来控制在将其传递到编辑器时哪些内容应受到保护。例如，当您想保护 PHP 代码不被格式化时，这非常有用。

要执行此操作，您必须发布配置文件并添加以下行

<?php

return [
'init' => [
        // ... Your awesome init config ...
         /**
         * Set what content should be protected while editing
         * This should be a regular expression
         * E.g "/<\?php.*?\?>/g" - Protect PHP code from been formatted
         */
         'protect' => []
];
//...

使用替代 CDN / 自托管脚本

TinyMCE 允许您使用脚本的替代镜像。如果您想使用非云版本（并避免 Tiny.cloud 的新机制定价），这将很有用。

您只需在 app/Providers/NovaServiceProvider.php 中添加以下内容

class NovaServiceProvider extends NovaApplicationServiceProvider
{
    /**
     * Bootstrap any application services.
     */
    public function boot(): void
    {
        parent::boot();

        // TinyMCE Mirror
        Nova::script('custom', 'https://cdn.jsdelivr.net.cn/npm/tinymce@6/tinymce.min.js');

        // ...
    }
}

TinyMCE 将自动检查是否存在脚本，并将忽略 tiny cloud 的脚本。

从 1.0.x 升级到 1.1.x

升级到 1.1 涉及使用与先前版本兼容的新配置布局。

然而，如果您想使用新的图片上传和版本更改功能，建议您运行新的 php artisan vendor:publish。

从 0.x 升级到 1.x

在 composer.json 中将软件包的版本更改为

"murdercode/nova4-tinymce-editor": "^1.0"

并运行 composer update。

此外，您必须按以下方式更改 nova-tinymce-editor 中插件代码片段的格式

0.x

'plugins' => [
            'anchor advlist autolink autoresize autosave code fullscreen link lists image imagetools media
            paste wordcount',
        ],

1.x

'plugins' => [
            'anchor',
            'advlist',
            // etc...
        ],

反馈和支持

欢迎测试、PR（包括此文档）。

murdercode / nova4-tinymce-editor

维护者

详细信息