quill-toggle-fullscreen-button

Quill module which adds a toggle fullscreen button to the Quill editor toolbar.

Install

npm install quill-toggle-fullscreen-button --save

Usage

First, set up a Quill editor.

Next, load quill-toggle-fullscreen-button module through any of the options presented by UMD.

Load script in HTML:

<script src="quill.toggleFullscreenButton.js"></script>

Using ES6-style import:

import QuillToggleFullscreenButton from 'quill-toggle-fullscreen-button';

Using CommonJS-style require:

const QuillToggleFullscreenButton = require('quill-toggle-fullscreen-button');

Then, register the quill-toggle-fullscreen-button module:

Quill.register('modules/toggleFullscreen', QuillToggleFullscreenButton);

const quill = new Quill('#editor', {
  modules: {
    toggleFullscreen: true
  }
});

For an example setup, see the example code, which can be run with:

npm start

To see the demo page, follow this link.

API

Configuration

The quill-toggle-fullscreen-button module has the following optional configuration:

• buttonTitle string: sets the title attribute of the toolbar button
• buttonHTML string: overrides the SVG icon of the toolbar button

Provide these options when setting up the Quill editor:

const editor = new Quill('#editor', {
  modules: {
    toggleFullscreen: {
      buttonTitle: 'Toggle fullscreen',
      buttonHTML: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
        <polyline class="ql-even ql-stroke" points="12 3 15 3 15 6" />
        <polyline class="ql-even ql-stroke" points="6 15 3 15 3 12" />
        <polyline class="ql-even ql-stroke" points="12 15 15 15 15 12" />
        <polyline class="ql-even ql-stroke" points="6 3 3 3 3 6" />
      </svg>`,
    },
  },
});

License

This code is available under the MIT license.