Giter VIP home page Giter VIP logo

yii2-quill's Introduction

yii2-quill

Latest Stable Version Total Downloads License

Yii 2 implementation of Quill, modern WYSIWYG editor.

Quill

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

yii2-quill

Installation

Run console command

composer require bizley/quill:^3.3

Or add the package to your composer.json:

{
    "require": {
        "bizley/quill": "^3.3"
    }
}

and run composer update.

NPM Assets

This package might depend on some NPM packages. Make sure you can fetch them by configuring your composer.json properly (i.e. by using https://asset-packagist.org/ - see instructions there).

Usage

Use it as an active field extension

<?= $form->field($model, $attribute)->widget(\bizley\quill\Quill::class, []) ?>

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 (you might need to provide your own toolbar in case of no 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' => []]]],
],

Additional information

Container and form's inputs

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. You can modify container's HTML attributes by setting 'options' parameter and hidden field HTML attributes by setting 'hiddenOptions' parameter.

Editor box's height

When allowResize option is set to false (default) editor's height is 150px (this can be changed by setting 'options' parameter). Setting allowResize to true resets the minimum height and allows it to be expanded freely. Editor's box extends as new text lines are added.

Quill source

By default, Quill is provided through the CDN (https://cdn.quilljs.com). 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. Starting from version 3.0.0 you can use local assets for Quill provided through NPM packet manager - to do so run

composer require npm-asset/quill:^1.3

Or add the package to your composer.json:

{
    "require": {
        "npm-asset/quill": "^1.3"
    }
}

You also need to set ['localAssets' => true] in Quill's configuration.

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
]

By default, KaTeX is provided through the CDN (https://cdn.jsdelivr.net). You can change the version of KaTeX by setting the 'katexVersion' parameter. Starting from version 3.0.0 you can use local assets for KaTeX provided through NPM packet manager - to do so run

composer require npm-asset/katex:^0.15

Or add the package to your composer.json:

{
    "require": {
        "npm-asset/katex": "^0.15"
    }
}

You also need to set ['localAssets' => true] in Quill's configuration.

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
]

By default, highlight.js is provided through the CDN (https://cdn.jsdelivr.net). You can change the version of highlight.js by setting the 'highlightVersion' parameter. Starting from version 3.0.0 you can use local assets for highlight.js provided through NPM packet manager - to do so run

composer require npm-asset/highlight.js:^11.4

Or add the package to your composer.json:

{
    "require": {
        "npm-asset/highlight.js": "^11.4"
    }
}

You also need to set ['localAssets' => true] in Quill's configuration.

You can change the default highlight.js stylesheet (for both CDN and local version) by setting the 'highlightStyle' parameter. See the list of possible styles.

Smart Break module

You can add Smart Break (support for shift + enter) by using the quill-smart-break plugin:

[
    'modules' => [
        'smart-breaker' => true,
    ],
]

Starting from version 3.1.0 quill-smart-break is provided through NPM packet manager by local asset. For previous versions you would have to add it through custom JS (see js property).
Run

composer require npm-asset/quill-smart-break:^0.2

Or add the package to your composer.json:

{
    "require": {
        "npm-asset/quill-smart-break": "^0.2"
    }
}

You also need to set ['localAssets' => true] in Quill's configuration.

yii2-quill's People

Contributors

dependabot-preview[bot] avatar dependabot[bot] avatar eseperio avatar simialbi avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

yii2-quill's Issues

Retrieve stored information to edit.

Hello,

I would like to know if you can help me with an inquiry. First, thanks for sharing this solution. I already set up everything and its running smoothly. However, I would like to know if there's a way to retrieve content already stored in the database and modify it using quill.

<?= $form->field($model, 'note')->widget(\bizley\quill\Quill::class, [ 'toolbarOptions' => 'FULL', 'options' => ['style' => 'min-height:350px;'] ]) ?>

This is the method used according to the instructions. However, is there any way to get something like this?

editor.root.innerHTML = $retrievedNote;

I hope you can help me with my doubt.

Best wishes,

David

yii2-quill with quill-mention?

Hi all,
I'm trying to setup this brilliant solution on auto mentions in Quill, and feel little stuck.
Can't quite get it -- how do I properly initialize any other modules other than formula and syntax? And not only initialize with true, but also pass several params and callbacks within.
If anybody could help, this would be very nice and kind!
-- best

Quill 1.0

I'm checking the compatibility with Quill 1.0 now. New release may appear soon.

CDN not working

Hello

I have a problem with several ISPs which are blocking quill cdn (Russia).
If it is possible could you please add local copies with possibility to include them if cnd is not available

Thank you

How to preserve ids and classes on pasted content

I'm trying to copy/paste text from a Word doc into the Quill editor and but all my ids and classes are being stripped. Is there a way to configure this module to modify the whitelist and ensure it gets properly preserved to the Yii db?

Specifically, I'm trying to handle footnotes which use anchor links that depend on id attributes. I'd also like preserve classes so I can style these footnotes.

I know this is probably more of a Quill/Parchment issue, but I've spent days and simply cannot figure out a solution. I suspect it has to do with adding an attributor or a clipboard matcher but the documentation is very terse and I've gotten nowhere. I was hoping you could help.

Click listener catches unexpected cases

Hey, @bizley!

Thanks for your extension.

I've noticed that on click by text input on link/embed tooltip, your click event with focus on editor will fired and tooltip hidden without any possibility to interact.

quill issue 2020-01-15 in 12 21 02

If I remove this event, quill's behave as expected. Why you adds this?

$js .= "document.getElementById(\"editor-{$this->id}\").onclick=function(e){document.querySelector(\"#editor-{$this->id} .ql-editor\").focus();};";

How can I add an attribute to hidden input field?

I need to add an attribute such as form="idOfMyForm" to the hidden input field since my quill editor is outside my form container. But if I add this via an option as below the form attribute ends up on a div container rather than on hidden input field and on submitting the form the input field's value is not submitted.

				$form->field($model, 'press_release', [
				'options' => ['form' => 'starterWizard__form']
				])
				->label('Add press release:')
				->widget(\bizley\quill\Quill::class, [
					'toolbarOptions' => 'FULL'
				]);

Enhancement: Allow editor to be resized?

The docs state:

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.

So I was able to increase the default editor size via:

'options' => [
    'style' => 'min-height: 300px;',
],

When you state "its box extends as new text lines are added", does this mean the editor's height should grow automatically? It just scrolls for me.

It would be ideal if there was a way to make the editor resizable by dragging the bottom-right corner.

use non-cdn asset

Hi,

in some installations internet access might be restricted and the quill asset cannot be retrieved from cdn. Could there be a flag to use a local quill asset instead of the cdn url?

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...

Error message:

PHP Compile Error โ€“ yii\base\ErrorException

Can't use method return value in write context

  1. in C:\xampp\htdocs\igaiAFMonit_protected\vendor\bizley\quill\Quill.php at line 250

}

/**
 * Renders toolbar.
 * @return string
 * @since 1.2.0
 */
public function renderToolbar()
{
    if (!empty($this->quillToolbar->getElements())) {
        $toolbarId = 'toolbar-' . $this->id;

        if (empty($this->configs['modules'])) {
            $this->configs['modules'] = ['toolbar' => []];
        }
        $this->configs['modules']['toolbar'] = ['container' => '#' . $toolbarId];

        return $this->quillToolbar->render($toolbarId);
    }
  1. yii\base\ErrorHandler::handleFatalError()

Quill cannot import module smart-breaker

Hi,
I have installed both the Quill editor and the smart break module as per instruction (using composer.json). The Quill editor works fine. When I try to use the Smart-breaker module, I have an error state that Quill cannot import module/smart-breaker (see attached image)
Quill-smart-breaker-error
Below is the code for Quill

echo $form->field($model, 'description')->widget(Quill::class, [
            'config' => ['localAssetss' => TRUE,],
            'options' => ['style' => 'height:220px', ],
            'modules' => [
                'formula' => TRUE, 
                'smart-breaker' => TRUE,
            ],
            'toolbarOptions' => [
                [['header' => [1, 2, 3, 4, FALSE]]],
                ['bold', 'italic', 'underline', 'strike'],
                ['link'],
                [['list' => 'bullet'], ['list' => 'ordered']],
                [['indent' => '-1'], ['indent' => '+1']],
                ['formula'],
            ],
        ])

If I comment out the line 'smart-breaker' => TRUE, then it works fine. I check and the smart-break files were install at vendor/npm-asset/quill-smart-break

Note that the vendor files are shared among many projects, hence, located outside the project directory. We used quite a number of Yii extensions without any issue.

I have googled for this issue but couldn't find anyone report similar issue.

Thanks,
D

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.