https://amka.github.io/quill-focus/

Enable focus mode
https://amka.github.io/quill-focus/

Last synced: about 1 month ago
JSON representation

Enable focus mode

• Host: GitHub
• URL: https://amka.github.io/quill-focus/
• Owner: amka
• License: mit
• Created: 2018-01-29T12:00:39.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2019-05-13T11:07:59.000Z (over 5 years ago)
• Last Synced: 2024-09-15T10:39:04.189Z (3 months ago)
• Language: JavaScript
• Homepage: https://amka.github.io/quill-focus/
• Size: 14.6 KB
• Stars: 10
• Watchers: 3
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-quill - quill-focus - A Quill.js module that adds "focus mode" (Uncategorized / Uncategorized)

README

        
# Quill Focus

This package is a [Quill.js](https://quillljs.com/) module that add focus mode.

## Quickstart

### NPM Mode

Just install it as usual with npm:

```bash

> npm i quill-focus

```

And then import it in your code, something like this:

```html

// Quill first!

var Quill = require('quill');

// Quill-Focus next

var Focus = require('quill-focus');

Quill.register('modules/focus', Focus)

var quill = new Quill('#editor', {

    theme: 'snow',

    modules: {

    focus: {

            focusClass: 'focused-blot' // Defaults to .focused-blot.

        }

    }

});

```

Done!

### Normal HTML

To install the module, set up an instance of Quill, add a script tag to the focus.js file and register it as a Quill module.

Don't forget to link default focus stylesheet. See example.

```html

    

    

    

    Quill-Focus Example

    

    

    

    


        


        

        

        

        

            // Don't forget to register module

            Quill.register('modules/focus', Focus)

            var quill = new Quill('#editor', {

                theme: 'snow',

                modules: {

                    // Activate Focus module

                    focus: {

                        focusClass: 'focused-blot' // Defaults to .focused-blot.

                    }

                }

            });

        

    


```

---

Thanks!