PHPackages                             ek0519/quilljs - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. ek0519/quilljs

ActiveLibrary[Utility & Helpers](/categories/utility)

ek0519/quilljs
==============

A Laravel Nova field.

0.5.0(4y ago)26134.6k↓41%20[3 issues](https://github.com/ek0519/nova-quilljs/issues)[2 PRs](https://github.com/ek0519/nova-quilljs/pulls)MITPHPPHP >=7.1.0

Since Dec 5Pushed 3y ago1 watchersCompare

[ Source](https://github.com/ek0519/nova-quilljs)[ Packagist](https://packagist.org/packages/ek0519/quilljs)[ RSS](/packages/ek0519-quilljs/feed)WikiDiscussions master Synced 1mo ago

READMEChangelogDependenciesVersions (24)Used By (0)

Laravel Nova Quilljs editor Field
=================================

[](#laravel-nova-quilljs-editor-field)

A Laravel Nova implementation of the [Quill editor for Vue.js](https://github.com/surmon-china/vue-quill-editor)

[![Latest Stable Version](https://camo.githubusercontent.com/6c7914ef5340aef5d2331e63243a5f7de27fa548c51821de9958c8863c073345/68747470733a2f2f706f7365722e707567782e6f72672f656b303531392f7175696c6c6a732f762f737461626c65)](https://packagist.org/packages/ek0519/quilljs)[![Total Downloads](https://camo.githubusercontent.com/9584d084066e1be55903e3e053f4dc26385e57c36a505db003914ed900de8295/68747470733a2f2f706f7365722e707567782e6f72672f656b303531392f7175696c6c6a732f646f776e6c6f616473)](https://packagist.org/packages/ek0519/quilljs)[![License](https://camo.githubusercontent.com/d087f8fae19c6a064653c6ba3c1ab1b9269c221e9621c20df00c2aec4022b912/68747470733a2f2f706f7365722e707567782e6f72672f656b303531392f7175696c6c6a732f6c6963656e7365)](https://packagist.org/packages/ek0519/quilljs)[![Monthly Downloads](https://camo.githubusercontent.com/c26c1abdc75238ccd4dc4c2b106ef5f9fdb1b2f9fe704f7e7a4ca4383b017da7/68747470733a2f2f706f7365722e707567782e6f72672f656b303531392f7175696c6c6a732f642f6d6f6e74686c79)](https://packagist.org/packages/ek0519/quilljs)[![Daily Downloads](https://camo.githubusercontent.com/007532469e2f453fed0d4ef9431c2086510a82aba2aee1e52169443620d9ded0/68747470733a2f2f706f7365722e707567782e6f72672f656b303531392f7175696c6c6a732f642f6461696c79)](https://packagist.org/packages/ek0519/quilljs)

What's new (2021-11-22)?
------------------------

[](#whats-new-2021-11-22)

You can use custom quilljs setting in different fields.

### 2021-08-09

[](#2021-08-09)

Work with other package [nova-translatable](https://github.com/optimistdigital/nova-translatable) and [nova-flexible-content](https://github.com/whitecube/nova-flexible-content), maybe it can change Vue `this.fields.attribute`, so I add `uploadUrlSplit` method, You can correctly upload your image.

Installation
------------

[](#installation)

Install via composer

```
composer require ek0519/quilljs

```

Modify quill's height, width, padding bottom
--------------------------------------------

[](#modify-quills-height-width-padding-bottom)

### **paddingBottom**(integer)

[](#paddingbottominteger)

In nova interface was not easy to set css about quill padding bottom, at some resolution maybe can overlaps, you can use **paddingBottom** to modify.

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

### **fullWidth(value)**

[](#fullwidthvalue)

Boolean

### **height(value)**

[](#heightvalue)

Number (unit px)

```
use Ek0519\Quilljs\Quilljs;

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

```

**resize** and **align** image
------------------------------

[](#resize-and-align-image)

I add this module  , thanks for

Image upload size
-----------------

[](#image-upload-size)

### **maxFileSize(size)**

[](#maxfilesizesize)

size : Number, default 2(MB)
**example**

```
use Ek0519\Quilljs\Quilljs;

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

```

Image upload
------------

[](#image-upload)

This Nova field provides native attachments driver which works similar to [Trix File Uploads](https://nova.laravel.com/docs/2.0/resources/fields.html#trix-field).

To use this attachments driver, publish and run the migration(also publish quilljs config to set [toolbar](https://quilljs.com/docs/modules/toolbar/)):

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

```

Then, allow users to upload images, just like with Trix field, chaining the withFiles method onto the field's definition. When calling this method, you should pass the name of the filesystem disk that images should be stored on(in this example, we use **public**, please use this command `php artisan storage:link` ):

```
use Ek0519\Quilljs\Quilljs;

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

```

### Work with other package [nova-translatable](https://github.com/optimistdigital/nova-translatable) and [nova-flexible-content](https://github.com/whitecube/nova-flexible-content)

[](#work-with-other-package-nova-translatable-and-nova-flexible-content)

When you use other packages like [nova-translatable](https://github.com/optimistdigital/nova-translatable) and [nova-flexible-content](https://github.com/whitecube/nova-flexible-content), they will overwrite upload api.

Ex: origin `your_host/nova-vendor/quilljs/articles/upload/content` , maybe overwrite to
`/nova-vendor/quilljs/articles/upload/content.en` or
`/nova-vendor/quilljs/articles/upload/content__SDAcscsdw`.

You can use

### **uploadUrlSplit(split\_string)**

[](#uploadurlsplitsplit_string)

split\_string : String
**example**

```
use Ek0519\Quilljs\Quilljs;

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

```

Customizing Tooltips
--------------------

[](#customizing-tooltips)

[![](https://camo.githubusercontent.com/732d2576a0b6ca02957bef52e137e4cfd6922156816457e46f39147183147b16/68747470733a2f2f692e696d6775722e636f6d2f6b534e776f554f2e706e67)](https://camo.githubusercontent.com/732d2576a0b6ca02957bef52e137e4cfd6922156816457e46f39147183147b16/68747470733a2f2f692e696d6775722e636f6d2f6b534e776f554f2e706e67)

In default, tooltip was disabled, if you want to use, in **Resource** add **->tooltip(true)**

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

```

**in config/tooltip.php**

You can use favorite description of tooltip.

```