README

EOL 通知：无进一步开发计划。该仓库最终将被归档，欢迎分叉并维护自己的版本。

Laravel Nova - CkEditor v5 字段

媒体、链接和片段浏览器（VueJS）

包含用于媒体、链接和片段模态的自定义插件。提供可发布占位符以实现即插即用。几分钟内实现丰富内容编辑。

包含的字段

• CkEditor 字段
• 特色媒体字段
• 媒体上传字段

包含的包

• Spatie Image Optimizer
• Intervention Image

安装

composer require bayareawebpro/nova-field-ckeditor
php artisan vendor:publish --tag=config

安装优化器

见： https://github.com/spatie/laravel-image-optimizer

发布占位符：模型、资源、迁移、视图

查看包含的占位符以了解预期的实现。

https://github.com/bayareawebpro/nova-field-ckeditor/tree/master/stubs

php artisan vendor:publish --tag=nova-ckeditor-stubs

编辑字段使用

CkEditor::make('Content')
    ->rules('required')
    ->hideFromIndex()
    ->mediaBrowser()
    ->linkBrowser()
    ->height(60)
    ->stacked()
    ->snippets([
        ['name' =>'Cool Snippet1', 'html'=> view('snippets.1')->render()],
        ['name' =>'Cool Snippet2', 'html'=> view('snippets.2')->render()],
        ['name' =>'Cool Snippet3', 'html'=> view('snippets.3')->render()],
    ])
    ->toolbar([
        'heading',
        'horizontalLine',
        '|',
        'link',
        'linkBrowser',
        '|',
        'bold',
        'italic',
        'alignment',
        'subscript',
        'superscript',
        'underline',
        'strikethrough',
        '|',
        'blockQuote',
        'bulletedList',
        'numberedList',
        '|',
        'insertTable',
        'mediaEmbed',
        'mediaBrowser',
        'insertSnippet',
        '|',
        'undo',
        'redo'
    ]),

注意：片段将仅渲染 CkEditor 元素。
标准 HTML 或图像（表格、图像、视频），见包含的视图。 https://ckeditor.npmjs.net.cn/docs

推荐包

https://github.com/bayareawebpro/laravel-dom-pipeline

特色媒体字段使用

FeaturedMedia::make('Image','media_id')
    ->rules('nullable')
    ->sizeOnDetail(800, 600)
    ->sizeOnForms(600, 400)
    ->sizeOnIndex(100,100)
    ->stacked(),

媒体上传字段使用

注意此字段默认无法更新。替换媒体可能导致图像损坏。建议删除并重新上传。

MediaUpload::make('File', $disk='media')
    ->rules('required','mimes:jpg,jpeg,png,gif', 'max:5000')
    ->help('5MB Max FileSize.')
    ->maxWidth(800),

媒体本地磁盘

'media' => [
    'driver' => 'local',
    'root' => storage_path('app/public/media'),
    'url' => env('APP_URL').'/storage/media',
    'visibility' => 'public',
],

媒体云磁盘

'media' => [
    'driver' => 's3',
    'key' => env('SPACES_KEY'),
    'secret' => env('SPACES_SECRET'),
    'endpoint' => env('SPACES_ENDPOINT'),
    'region' => env('SPACES_REGION'),
    'bucket' => env('SPACES_BUCKET'),
    'root' => 'media',
    'url' => 'https://'.env('SPACES_BUCKET').'.'.env('SPACES_REGION').'.cdn.digitaloceanspaces.com/media',
    'options' => [ 'CacheControl' => 'max-age=31536000, public' ],
],

媒体存储

通过绑定自己的扩展版本来覆盖媒体存储服务。

use Illuminate\Http\Request;
use BayAreaWebPro\NovaFieldCkEditor\MediaStorage;
class MyMediaStorage extends MediaStorage
{
    public function __invoke(Request $request)
    {
        // TODO: Change the default implementation.
    }
}
$this->app->bind('ckeditor-media-storage', MyMediaStorage::class);