vuetik/vuetik-laravel

VueTik 服务器端集成与 Laravel 转换器

2.0.3 2024-03-14 07:22 UTC

README

Latest Version on Packagist GitHub Tests Action Status GitHub Code Style Action Status Total Downloads

Vue-Tik 的 Laravel 服务器端集成与转换器。

迁移指南

从 1.x 迁移到 2.x 的文档在 迁移指南 Wiki 中。

特性

  • 图片上传路由
  • 图片清理定时任务
  • 自动将图片分离为 base64 并验证到目标对象存储
  • Twitter 内容预加载
  • Glide 集成
  • HTML 清理

安装

您可以通过 composer 安装此包。

composer require vuetik/vuetik-laravel

您可以使用以下命令发布并运行迁移:

php artisan vendor:publish --tag="vuetik-laravel-migrations"
php artisan migrate

您可以使用以下命令发布配置文件:

php artisan vendor:publish --tag="vuetik-laravel-config"

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

[
    'max_upload_size' => 2048,
    'storage' => [
        'disk' => 'local',
        'path' => 'images/',
    ],
    'table' => 'vuetik_images',
    'image_vendor_route' => '/img',
    'glide' => [
        'enable' => true,
        'sign_key' => env('APP_KEY'),
        'img_modifiers' => [],
    ],
    'purge_after' => '-2 days',
    'base64_to_storage' => [
        'enable' => true,
        'save_format' => 'png',
        'quality' => 100
    ],
];

用法

Vuetik Laravel 为图片上传路由和内容解析提供了集成。为了满足 VueTik 的需求注册图片上传路由,您可以轻松地调用

public function boot() {
    Vuetik\VuetikLaravel\VuetikLaravel::routes();
}

到任何服务提供商。

对于内容解析,可以通过以下方式轻松实现:

use Vuetik\VuetikLaravel\Facades\VuetikLaravel;

VuetikLaravel::parse($htmlOrDecodedJson);

// or if you use JSON

VuetikLaravel::parseJson($jsonString);

尽管 HTML 解析器正在工作,但最终结果可能不够准确。因此,建议使用 JSON 方法。

可用选项

parseparseJson API 都接受包含以下内容的数组 $options

示例传递

use Vuetik\VuetikLaravel\VuetikLaravel;

VuetikLaravel::parseJson($json, [
    'twitter' => [
        'throwOnFail' => true
    ],
    'image' => [
        'throwOnFail' => true
    ]
])

图片管理

每个上传的图片都处于 临时 状态,并且默认情况下 Vuetik Laravel 具有预定义的图片管理。通过将 image.autoSave 设置为 false(默认为 true)可以关闭此行为。

启用该选项后,Vuetik Laravel 将处理整个图片管理过程,无需手动交互。

如果您想手动保存,Vuetik Laravel 已经提供了辅助函数

use Vuetik\VuetikLaravel\ImageManager;

// quick store preuploads
// if you have a payload containing predefined id (which usally comes from editor.storage.ids)
// you can use storePreuploads to store the images without Vuetik Laravel to parse it. This could be  
// faster, but it's currently unable to save extra attributes (width, height, etc)
ImageManager::storePreuploads(["id1", "id2"]);

// Store all the images parsed from Vuetik Laravel
// This method returns an array containing all the data of the stored image.
// It's expected ContentFactory as the argument (return value of VuetikLaravel::parse() or VuetikLaravel::parseJson())
ImageManager::store($content);

// This method will return a glide url
// based on VuetikImages model with defined base url and additional attributes.
ImageManager::getGlideUrl($imgModel, $vendorUrl, $props);

通常您只会使用 Store API。

管理失败的图片解析

例如,图片解析失败的情况是可能的,例如无效的 base64 字符串等。Vuetik Laravel 已经提供了 image.throwOnFail,它将抛出异常并中断整个解析过程。

本指南将介绍如果将选项设置为 false 的情况。

  • 对于 Base64 图片,Vuetik 将简单地忽略它们,并且结果图片保持不变。
  • 对于预上传图片,Vuetik 将在解析内容中添加一个类 vuetik__failed__img,并将其保留为原样。我们鼓励您添加样式以突出显示失败的图片。

尽管如此,我认为将 throwOnFail 设置为 true 是最好的。

清理未使用的图片

要清理未使用的图片,Vuetik Laravel 提供了 purge:unused-images 命令,允许您删除在 vuetik-laravel.purge_after 之后创建且状态为 P 的图片。

只需在 Kernel.php 中调度该命令即可

protected function schedule(Schedule $schedule): void
{
    $schedule->command('purge:unused-images')->daily();
}

清理命令还支持以下参数

  • --after 覆盖任务的 purge_after 配置
  • --disk 覆盖任务的 storage.disk 配置
  • --path 覆盖任务的 storage.path 配置
  • --show-log 启用任务执行情况的详细输出。

它是如何工作的?

每次您上传图片或使用base64格式的图片时,Vuetik Laravel都会跟踪这些图片并将它们存入数据库,这些记录都有created_at时间戳以及状态为'P'或'A'。

如您所知,Vuetik只会删除状态为'P'且created_at符合purge_after标准的图片。

渲染Twitter

Vuetik Laravel仅预加载您的Twitter内容,以便稍后由Twitter WidgetJS进行解析和预加载,因此得名pre-hydrated

要在视图中渲染Twitter,您需要使用Twitter JS依赖来预加载内容

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

如果您使用Blade,Vuetik Laravel还提供了一个辅助指令

@twitterScript

该指令在底层渲染了之前提到的脚本。

管理失败的Twitter解析

Twitter解析可能因ID无效而失败。因此,存在twitter.failOnThrow选项,默认为true。如果将其设置为false,Vuetik Laravel将渲染:Twitter数据获取失败

测试

composer test

变更日志

请查看变更日志以获取有关最近更改的更多信息。

贡献

请查看贡献指南以获取详细信息。

致谢

许可证

MIT许可证(MIT)。请参阅许可证文件以获取更多信息。