https://github.com/indico/ckeditor5-full-screen

https://github.com/indico/ckeditor5-full-screen

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/indico/ckeditor5-full-screen
• Owner: indico
• License: mit
• Created: 2022-09-13T14:05:53.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2023-07-31T15:08:00.000Z (over 1 year ago)
• Last Synced: 2024-09-29T07:39:06.431Z (3 months ago)
• Language: JavaScript
• Size: 907 KB
• Stars: 1
• Watchers: 6
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# CKEditor 5 full screen plugin

![](assets/fullscreen.png)



    



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