README

本包是一个 Nova WYSIWIG 字段，它使用 TinyMCE，具有丰富的配置/插件。

安装
本地开发
tinyMCE

安装

composer require bythepixel/nova-tinymce-field
php artisan vendor:publish --provider="Bythepixel\\NovaTinymceField\\FieldServiceProvider"

本地开发

在本地环境中开发此包可能有些棘手，尤其是使用 Laravel Sail 来容器化应用程序时。通常在本地包开发过程中，您将能够创建一个指向外部目录的符号链接，并在 composer.json 文件中引用该符号链接。但是，由于容器无法访问该符号链接目录，所以这行不通。

为了能够在此包上工作，查看开发期间反映出的更改，同时在本项目仓库内隔离此仓库，我们使用 Git 子模块并更新项目的 composer.json 以指向本地目录。

创建子模块

在项目的根目录下运行 git submodule add https://github.com/bythepixel/nova-tinymce-field。这实际上是在您的项目中克隆此仓库，同时也创建了一个新的 .gitmodules 文件，其外观如下所示

[submodule "nova-tinymce-field"]
    path = nova-tinymce-field
    url = https://github.com/bythepixel/nova-tinymce-field

如果需要，此文件可以在开发完成后删除。这实际上通知 git 保持此仓库和您的项目仓库分离。但是，您可能希望更新项目的根 .gitignore 以排除此目录。子模块中的单个文件不会被跟踪，但会跟踪新目录。

更新 composer.json

一旦创建了子模块，您可以将项目的 composer.json 更新为指向新的本地目录。

首先，您必须在 repositories 下创建一个新的条目

"repositories": [
    ...existing repositories,
    {
        "type": "path",
        "url": "./nova-tinymce-field"
    }
]

其次，您必须更新 required 下的 bythepixel/nova-tinymce-field 条目。如果您在此仓库的 master 分支上开发，请传递 @dev。

"bythepixel/nova-tinymce-field": "@dev",

如果您在不同的分支上工作，声明应如下所示 dev-NAME-OF-BRANCH

"bythepixel/nova-tinymce-field": "dev-hotfix-field",

如果您的项目已经有一个包含此包的 composer.lock 文件，请运行 composer update bythepixel/nova-tinymce-field，否则只需运行 composer i。

一旦本地开发完成，并将您的更改推送到 origin，您可以删除 .gitmodules 文件，并从您的项目中删除 nova-tinymce-field 目录。如果您选择将 .gitmodules 文件提交到仓库，则未来的所有 git clone 都将包含每个声明的子模块的空文件夹。每个文件夹都可以通过 cd 进入文件夹并运行以下两个命令来填充

git submodule init
git submodule update

有关子模块的更多信息，请参阅官方文档。

更新 Vue 组件

首先，您需要更新此仓库中 nova.mix.js 和 package.json 的两个 nova 相关路径。

在 package.json 中，对于 nova:install 命令

From:
"nova:install": "npm --prefix='../../vendor/laravel/nova' ci"

To:
"nova:install": "npm --prefix='../vendor/laravel/nova' ci"

在 nova.mix.js 中，在第 30 行

From:
'../../vendor/laravel/nova/resources/js/mixins/packages.js'

To:
'../vendor/laravel/nova/resources/js/mixins/packages.js'

然后，在 nova-tinymce-field 目录下，运行 npm i 和 npm run nova:install 来安装字段的依赖。要实现实时更新，请运行 npm run watch。

一旦开发完成，请确保运行 npm run prod 重新构建资源。

重要：资源构建成功后，请恢复 package.json 和 nova.mix.js 的更改。原始路径对于生产安装是正确的，但必须更新以用于本地开发。

tinyMCE

配置

有关核心 TinyMCE 软件包的配置细节，请参阅 https://www.tiny.cloud/docs/configure/。此自定义字段使用 Vue 包装器注入字段；其文档可在此处找到。

简码

此 TinyMCE 实现包含一个自定义插件，用于在编辑器中简化短代码插入。但有一个注意事项，截至写作时，不支持打开/关闭短代码标签。

启用简码插件

要启用短代码插件，该插件会在 WYSIWYG 工具栏中添加一个新的“短代码”按钮，您必须更新 nova-tinymce-field 中的 plugins 和 toolbar。

'plugins' => [
    'plugin1 plugin2 shortcodes'
],
'toolbar' => [
    'button1 button2 | button3 button4 | shortcodes',
]

注册简码

我们使用 webwizo/laravel-shortcodes 作为 Laravel 项目的短代码主要驱动，该驱动使用以下语法进行短代码片段

[shortcode-name attribute="value" another_attribute="value"]

准备短代码类以在 nova-tinymce-field 配置中注册的最简单方法是在此包中包含 HasWysiwygShortcode 特性。您需要在类中包含三个 public static 属性，以确保特性的辅助方法可以正确构建所需的 TinyMCE 面板

$name - 短代码的显示名称
$slug - 用于短代码片段的 slug
$attributes - 短代码使用的非关联数组属性

一个示例类可能如下所示

use Bythepixel\NovaTinymceField\Traits\HasWysiwygShortcode;

class AccentedHeadingShortcode
{
    use HasWysiwygShortcode;

    public static string $name = "Accented Heading";
    public static string $slug = "accented-heading";
    public static array $attributes = [
        'heading',
        'subheading'
    ];

    // required for webwizo/laravel-shortcodes registration
    public function register() {}
}

一旦类准备就绪，可以注册到插件中，请将其添加到 nova-tinymce-field 配置的 shortcodes 数组中

use App\Shortcodes\AccentedHeadingShortcode;

return [
    ... other config options,
    'shortcodes' => [
        AccentedHeadingShortcode::class
    ]
]

您可能还需要使用 artisan config:clear 清除 Laravel 的配置缓存。

配置更新正确后，您应该在点击 WYSIWYG 工具栏中的“短代码”按钮后看到相应的标签页！

bythepixel / nova-tinymce-field

维护者

详细信息