# ckeditor5-full-screen

> Adds a full screen support similar to the maximize plugin in ckeditor 4.

Latest version **0.0.2** (published 2023-07-31) · MIT license · 0 weekly downloads

## Install

```sh
npm install ckeditor5-full-screen
pnpm add ckeditor5-full-screen
yarn add ckeditor5-full-screen
bun add ckeditor5-full-screen
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2023-07-31 |
| First published | 2022-09-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 418.7 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Indico Team |
| Maintainers | tomasr, thiefmaster, ub1k |
| Keywords | ckeditor, ckeditor5, maximize, full screen |

## Links

- npm: https://www.npmjs.com/package/ckeditor5-full-screen
- Repository: https://github.com/indico/ckeditor5-full-screen
- Homepage: https://github.com/indico/ckeditor5-full-screen#readme
- Issues: https://github.com/indico/ckeditor5-full-screen/issues
- npm.io page: https://npm.io/package/ckeditor5-full-screen

## Dependencies (1)

- [ckeditor5](https://npm.io/package/ckeditor5.md) ^38.1.1

## Alternatives

- [ext-list](https://npm.io/package/ext-list.md) — 6.3M weekly downloads
- [@lexical/selection](https://npm.io/package/@lexical/selection.md) — 3.8M weekly downloads
- [@lexical/text](https://npm.io/package/@lexical/text.md) — 3.6M weekly downloads
- [@lexical/clipboard](https://npm.io/package/@lexical/clipboard.md) — 3.0M weekly downloads
- [@tiptap/extension-mention](https://npm.io/package/@tiptap/extension-mention.md) — 3.0M weekly downloads

## Recent versions

- 0.0.2 (latest) — 2023-07-31
- 0.0.1 — 2022-09-15
- 0.0.0 — 2022-09-14

## README

# CKEditor 5 full screen plugin

![](assets/fullscreen.png)

<p align="center">
    <img src="assets/fullscreen-icon.png" />
</p>

Icon thanks to [css.gg](https://github.com/astrit/css.gg).

## Description

This plugin provides a full screen mode for ckeditor 5. The plugin adds a button to the editor toolbar which can be used to toggle between the normal ckeditor and the full screen mode. To exit the full screen mode, it is also possible to press escape or click anywhere in the background (See [configuration](#configuration)).

## Installation

Via npm:

```bash
npm i ckeditor5-full-screen
```

### Add the plugin to ckeditor:

If using a predefined build:

```js
import FullScreen from "ckeditor5-full-screen/src/fullscreen";

Editor.builtinPlugins = [
  // ...
  FullScreen,
];

Editor.defaultConfig = {
  toolbar: {
    items: [
      // ...
      "fullscreen", // Add the toolbar button
    ],
  },
};
```

If building from source:

```js
import FullScreen from "ckeditor5-full-screen/src/fullscreen";

Editor.create(element, {
  plugins: [FullScreen],
  toolbar: ["fullscreen"],
})
  .then((editor) => {
    // ...
  })
  .catch((error) => {
    // ...
  });
```

More information about installing plugins can be found in the official [documentation](https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/installing-plugins.html
).

## Configuration

| Name                       | Default value | Description                                                                            |
| -------------------------- | ------------- | -------------------------------------------------------------------------------------- |
| `fullscreen.closeOnEscape` | `true`        | If set to `true`, exits the full screen mode when escape is pressed.                   |
| `fullscreen.closeOnClick`  | `true`        | If set to `true`, exits the full screen mode when clicking anywhere in the background. |

### Example

```js
Editor.defaultConfig = {
  // ...
  fullscreen: {
    closeOnEscape: true,
    closeOnClick: false,
  },
};
```

```js
Editor.create(element, {
  // ...
  fullscreen: {
    closeOnEscape: true,
    closeOnClick: false,
  },
});
```

## Development

Ignore this if you just want to use this package.

If you want to run ckeditor locally using e.g. https://github.com/indico/ckeditor,
you can install this package directly:

`npm install $(npm pack /path/to/the/package | tail -1)`

Just using `npm install /path/to/the/package` doesn't work because npm symlinks the package instead of copying it. This will cause duplicated packages when bundling the editor with webpack (this [error](https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-ckeditor-duplicated-modules)). The fix is to create a zipped package with `npm pack` first and installing that one instead.

Useful SO links:

- https://stackoverflow.com/a/53215430
- https://stackoverflow.com/a/45016447

---
_Source: https://npm.io/package/ckeditor5-full-screen · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._