README

注意

注意：此包已从 ek0519/nova-quilljs 分支出来，并包含一些关于从剪贴板上传图片的功能。

Laravel Nova 的 Quill 编辑器 for Vue.js 实现

更新内容（20200708）？

感谢 Gabrijel Gavranović 的 PR，添加了文件上传最大大小 设置。

安装

通过 composer 安装

composer require wmateam/nova-quilljs

修改 quill 的高度和宽度

fullWidth(value)

布尔值

height(value)

数字（单位 px）

use Wmateam\NovaQuilljs\NovaQuilljs;

NovaQuilljs::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 Wmateam\NovaQuilljs\NovaQuilljs;

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

图片上传

此 Nova 字段提供了原生的附件驱动程序，其工作方式类似于 Trix 文件上传。

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

php artisan vendor:publish --provider="Wmateam\NovaQuilljs\FieldServiceProvider"
php artisan migrate

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

use Wmateam\NovaQuilljs\NovaQuilljs;

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

自定义提示信息

默认情况下，提示信息是禁用的，如果需要使用，在 资源 中添加 ->tooltip(true)

NovaQuilljs::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"]
];

视频嵌入

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

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

YouTube

• 示例 URL https://www.youtube.com/watch?v=rgHqK6Dge4w

Facebook

• 示例 URL https://#/standnewshk/videos/272770540314346/UzpfSTEzODQ4NjU1NDY6MTAyMjEzMDE0MDExMDk2MDM/