README

（2021-11-22）有什么新功能？

您可以在不同的字段中使用自定义的quilljs设置。

2021-08-09

与其他包（如nova-translatable和nova-flexible-content）一起工作，它们可能会更改Vue this.fields.attribute，因此我添加了uploadUrlSplit方法，您可以正确上传您的图片。

安装

通过composer安装

composer require ek0519/quilljs

修改quill的高度、宽度和底部内边距

paddingBottom(整数)

在nova界面设置quill底部内边距的CSS不太容易，在某些分辨率下可能重叠，您可以使用paddingBottom进行修改。

Quilljs::make(__('Content'), 'content')
        ->paddingBottom(30)
        ->withFiles('public')
        ->placeholder('please enter here')
        ->height(300)
        ->rules('required'),

fullWidth(value)

布尔值

height(value)

数字（单位px）

use Ek0519\Quilljs\Quilljs;

Quilljs::make('content')
        ->withFiles('public')
        ->fullWidth(false) (option, default full-width)
        ->height(500) (option, default 300px)
        ->rules('required'),

调整和对齐图片

我添加了此模块https://github.com/Fandom-OSS/quill-blot-formatter，感谢https://github.com/Fandom-OSS

图片上传大小

maxFileSize(size)

size : 数字，默认2(MB)
示例

use Ek0519\Quilljs\Quilljs;

Quilljs::make('content')
        ->withFiles('public')
        ->maxFileSize(3)
        ->rules('required'),

图片上传

此Nova字段提供了类似Trix文件上传的本地附件驱动程序。

要使用此附件驱动程序，发布并运行迁移（同时发布quilljs配置以设置工具栏）

php artisan vendor:publish --provider="Ek0519\Quilljs\FieldServiceProvider"
php artisan migrate

然后，允许用户上传图片，就像使用Trix字段一样，在字段的定义上链式调用withFiles方法。在调用此方法时，您应该传递应存储图片的文件系统磁盘的名称（在此示例中，我们使用public，请使用此命令php artisan storage:link）

use Ek0519\Quilljs\Quilljs;

Quilljs::make('content')
        ->withFiles('public')
        ->placeholder('please enter here')
        ->rules('required'),

与其他包（如nova-translatable和nova-flexible-content）一起工作

当您使用其他包，如nova-translatable和nova-flexible-content时，它们将覆盖上传API。

例：原始your_host/nova-vendor/quilljs/articles/upload/content，可能覆盖为
/nova-vendor/quilljs/articles/upload/content.en或
/nova-vendor/quilljs/articles/upload/content__SDAcscsdw.

您可以使用

uploadUrlSplit(split_string)

split_string : 字符串
示例

use Ek0519\Quilljs\Quilljs;

Quilljs::make('content')
        ->withFiles('public')
        ->placeholder('please enter here')
        ->uploadUrlSplit('.')
        ->rules('required')
        ->translatable(), // nova-translatable's method

自定义工具提示

默认情况下，工具提示是禁用的，如果需要使用，在Resource中添加->tooltip(true)

Quilljs::make(__('Content'), 'content')
                ->withFiles('public')
                ->tooltip(true)

在config/tooltip.php中

您可以使用喜欢的工具提示描述。

<?php

return [
        ['Choice' =>'.ql-bold','title' =>'bold'],
        ['Choice' =>'.ql-italic','title' =>'italic'],
        ['Choice' =>'.ql-underline','title' =>'underline'],
        ['Choice' =>'.ql-header','title' =>'header'],
        ['Choice' =>'.ql-strike','title' =>'strike'],
        ['Choice' =>'.ql-blockquote','title' =>'blockquote'],
        ['Choice' =>'.ql-code-block','title' =>'code-block'],
        ['Choice' =>'.ql-size','title' =>'font-size'],
        ['Choice' =>'.ql-list[value="ordered"]','title' =>'order list'],
        ['Choice' =>'.ql-list[value="bullet"]','title' =>'bulleted list'],
        ['Choice' =>'.ql-header[value="1"]','title' =>'h1'],
        ['Choice' =>'.ql-header[value="2"]','title' =>'h2'],
        ['Choice' =>'.ql-align','title' =>'align'],
        ['Choice' =>'.ql-color','title' =>'color'],
        ['Choice' =>'.ql-background','title' =>'background'],
        ['Choice' =>'.ql-image','title' =>'image'],
        ['Choice' =>'.ql-video','title' =>'video'],
        ['Choice' =>'.ql-link','title' =>'link'],
        ['Choice' =>'.ql-formula','title' =>'formula'],
        ['Choice' =>'.ql-clean','title' =>'clean'],
        ['Choice' =>'.ql-indent[value="-1"]','title' =>'indent left'],
        ['Choice' =>'.ql-indent[value="+1"]','title' =>'indent right'],
        ['Choice' =>'.ql-header .ql-picker-label','title' =>'header size'],
        ['Choice' =>'.ql-header .ql-picker-item[data-value="1"]','title' =>'H1'],
        ['Choice' =>'.ql-header .ql-picker-item[data-value="2"]','title' =>'H2'],
        ['Choice' =>'.ql-header .ql-picker-item[data-value="3"]','title' =>'H3'],
        ['Choice' =>'.ql-header .ql-picker-item[data-value="4"]','title' =>'H4'],
        ['Choice' =>'.ql-header .ql-picker-item[data-value="5"]','title' =>'H5'],
        ['Choice' =>'.ql-header .ql-picker-item[data-value="6"]','title' =>'H6'],
        ['Choice' =>'.ql-header .ql-picker-item:last-child','title' =>'normal'],
        ['Choice' =>'.ql-size .ql-picker-item[data-value="small"]','title' =>'small'],
        ['Choice' =>'.ql-size .ql-picker-item[data-value="large"]','title' =>'large'],
        ['Choice' =>'.ql-size .ql-picker-item[data-value="huge"]','title' =>'xlarge'],
        ['Choice' =>'.ql-size .ql-picker-item:nth-child(2)','title' =>'normal'],
        ['Choice' =>'.ql-align .ql-picker-item:first-child','title' =>'align left'],
        ['Choice' =>'.ql-align .ql-picker-item[data-value="center"]','title' =>'align center'],
        ['Choice' =>'.ql-align .ql-picker-item[data-value="right"]','title' =>'align right'],
        ['Choice' =>'.ql-align .ql-picker-item[data-value="justify"]','title' =>'justify']
];

自定义Quilljs工具栏

如果您想更改工具栏的设置，您可以在配置文件夹中的quilljs.php中更改，参考quilljs网站https://quilljs.com/docs/modules/toolbar

return [
    ["bold", "italic", "underline", "strike"],
    ["blockquote", "code-block"],
    [ ['header'=> 1 ], ['header'=> 2]],
    [['list'=> "ordered" ], ['list'=> "bullet" ]],
    [[ 'script'=> "sub" ], [ 'script'=> "super" ]],
    [[ 'indent'=> "-1" ], [ 'indent'=> "+1" ]],
    [[ 'direction'=> "rtl" ]],
    [[ 'size'=> ["small", false, "large", "huge"] ]],
    [[ 'header'=> [1, 2, 3, 4, 5, 6, false] ]],
    [[ 'color'=> [] ], [ 'background'=> [] ]],
    [[ 'font'=> [] ]],
    [[ 'align'=> [] ]],
    ["clean"],
    ["link", "image", "video"]
];

或您可以使用新的API ->config(array [])。

Quilljs::make(__('Content'), 'content')
        ->config([
                ["bold", "italic", "underline", "strike"],
                ["blockquote", "code-block"],
                [ ['header'=> 1 ], ['header'=> 2]],
                [['list'=> "ordered" ], ['list'=> "bullet" ]],
                [[ 'script'=> "sub" ], [ 'script'=> "super" ]],
                [[ 'indent'=> "-1" ], [ 'indent'=> "+1" ]],
                [[ 'direction'=> "rtl" ]],
                [[ 'size'=> ["small", false, "large", "huge"] ]],
                [[ 'header'=> [1, 2, 3, 4, 5, 6, false] ]],
                [[ 'color'=> [] ], [ 'background'=> [] ]],
                [[ 'font'=> [] ]],
                [[ 'align'=> [] ]],
                ["clean"],
                ["link", "image", "video"]
        ]),

视频嵌入

仅支持YouTube和Facebook，Nova中的默认大小为宽度800px和高度450px，在CSS中定义

.ql-video{
  width: 800px;
  height: 450px;
}

YouTube

示例网址 https://www.youtube.com/watch?v=rgHqK6Dge4w

Facebook

示例网址 https://#/standnewshk/videos/272770540314346/UzpfSTEzODQ4NjU1NDY6MTAyMjEzMDE0MDExMDk2MDM/

ek0519 / quilljs

维护者

详细信息