Yii 2.0: yii2-quill

Yii 2 implementation of Quill, modern WYSIWYG editor
5 followers

Quill

You can find Quill at https://quilljs.com/

yii2-quill

Installation

Easiest way to install this extension is through the Composer.
Add in your composer.json:
"bizley/quill": "^2.0"
or run console command:
php composer.phar require "bizley/quill ^2.0"

If you want to install Quill beta version add:
"bizley/quill": "^1.0"

Usage

Use it as an active field extension
<?= $form->field($model, $attribute)->widget(\bizley\quill\Quill::className(), []) ?>

or as a standalone widget
<?= \bizley\quill\Quill::widget(['name' => 'editor', 'value' => '']) ?>

Basic parameters

  • theme string default 'snow'
    'snow' (Quill::THEME_SNOW) for Quill's snow theme,
    'bubble' (Quill::THEME_BUBBLE) for Quill's bubble theme,
    false or null to remove theme. See Quill's documentation for themes.

  • toolbarOptions boolean|string|array default true
    true for theme's default toolbar,
    'FULL' (Quill::TOOLBAR_FULL) for full Quill's toolbar,
    'BASIC' (Quill::TOOLBAR_BASIC) for few basic toolbar options,
    array for toolbar configuration (see below).

Toolbar

Quill's toolbar from version 1.0 can be easily configured with custom set of buttons.
See Toolbar module documentation for details.

You can pass PHP array to 'toolbarOptions' parameter to configure this module (it will be JSON-encoded).

For example, to get:

new Quill('#editor', {
    modules: {
        toolbar: [['bold', 'italic', 'underline'], [{'color': []}]]
    }
});

add the following code in widget configuration:

[
    'toolbarOptions' => [['bold', 'italic', 'underline'], [['color' => []]]],
],

Toolbar configuration for previous yii2-quill version (^1.0 with Quill beta) is deprecated.

Additional information

Container and form's input

Quill editor is rendered in div container (this can be changed by setting 'tag' parameter) and edited content is copied to hidden input field so it can be used in forms.

Editor box's height

Default editor height is 150px (this can be changed by setting 'options' parameter) and its box extends as new text lines are added.

Quill source

Quill's JS code is provided by CDN. You can change the Quill's version set with the current yii2-quill's release by changing 'quillVersion' parameter but some options may not work correctly in this case.

Additional JavaScript code

You can use parameter 'js' to append additional JS code.
For example, to disable user input Quill's API provides this JS:

quill.enable(false);

To get the same through widget's configuration add the following code:

[
    'js' => '{quill}.enable(false);',
],

{quill} placeholder will be automatically replaced with the editor's object variable name.
For more details about Quill's API visit https://quilljs.com/docs/api/

Formula module

Quill can render math formulas using the KaTeX library.
To add this option configure widget with Formula module:

[
    'modules' => [
        'formula' => true // Include formula module
    ],
    'toolbarOptions' => [['formula']] // Include button in toolbar
]

You can change the version of KaTeX by setting the 'katexVersion' parameter.

Syntax Highlighter module

Quill can automatically detect and apply syntax highlighting using the highlight.js library. To add this option configure widget with Syntax Highlighter module:

[
    'modules' => [
        'syntax' => true // Include syntax module
    ],
    'toolbarOptions' => [['code-block']] // Include button in toolbar
]

You can change the version of highlight.js by setting the 'highlightVersion' parameter.
You can change the default highlight.js stylesheet by setting the 'highlightStyle' parameter. See the list of possible styles (all files ending with .min.css).

GitHub

https://github.com/bizley/yii2-quill

Total 6 comments

#19953 report it
Bizley at 2016/10/06 04:33pm
yii2-quill 2.0

yii2-quill 2.0 is here with Quill 1.0.

#19922 report it
Bizley at 2016/08/01 08:39am
Re: Upgrading to the new version 1.2.0

@Master STF3

Could you paste the logged error stack? Or better report the issue at Github?

#19921 report it
Master STF3 at 2016/08/01 08:33am
Upgrading to the new version 1.2.0

When upgrading to the new version 1.2.0 (Yii 2.0: yii2-quill), the extension has crashed, giving the following error message: PHP Compile Error - yii \ base \ ErrorException Can not use method return value in write context

What is wrong ???

Thank you...

#19702 report it
Master STF3 at 2015/12/20 04:48pm
Re: How to limit the number of rows?

Thanks for the quick response. Already got way to implement the suggestion. Everything works fine. Keep up the good work, I will be attentive to the next developments. MasterSTF3

#19699 report it
Bizley at 2015/12/20 04:30am
Re: How to limit the number of rows?

Quill is not generating textarea for the editor, it's plain div. You can control its size (like in most widgets) with:

'options' => ['class' => '...']

and/or

'options' => ['style' => 'width:...; height:...']

passed in the configuration array.

Cheers!

#19698 report it
Master STF3 at 2015/12/19 08:37pm
How to limit the number of rows?

How to limit the number of rows?

Would limit the number of rows to display in the registration form (view). I have not found any form or argument to limit the number of rows to display.

In the common situation of Yii2 base, I can limit the presentation editor in 6 lines as the following example,

<?= $form->field($model, 'obs')->textarea(['rows' => 6]) ?>

As do the same in this extension?

Good job ... Thanks for sharing.

Leave a comment

Please to leave your comment.

Create extension
Downloads
No downloadable files yet