# @gtomato/ckeditor5-strapi-upload-plugin

> CKEditor 5 Strapi upload adapter plugin

Latest version **1.0.0** (published 2020-07-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install @gtomato/ckeditor5-strapi-upload-plugin
pnpm add @gtomato/ckeditor5-strapi-upload-plugin
yarn add @gtomato/ckeditor5-strapi-upload-plugin
bun add @gtomato/ckeditor5-strapi-upload-plugin
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2020-07-01 |
| First published | 2020-07-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 11.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 14 |
| Author | gary.yh.lo@gtomato.com |
| Maintainers | gaplo917, npmgtadmin |
| Keywords | ckeditor, strapi |

## Links

- npm: https://www.npmjs.com/package/@gtomato/ckeditor5-strapi-upload-plugin
- Repository: https://github.com/gtomato/ckeditor5-strapi-upload-plugin
- Homepage: https://github.com/gtomato/ckeditor5-strapi-upload-plugin#readme
- Issues: https://github.com/gtomato/ckeditor5-strapi-upload-plugin/issues
- npm.io page: https://npm.io/package/@gtomato/ckeditor5-strapi-upload-plugin

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

- 1.0.0 (latest) — 2020-07-01
- 1.0.0-beta.2 — 2020-07-01
- 1.0.0-beta.1 — 2020-07-01
- 1.0.0-beta.0 — 2020-07-01

## README

# CKEditor 5 Strapi Upload Adapter Plugin

1. You need to create your custom build of CKEditor.
2. Register this plugin into your custom build
3. Integrate with Strapi

## 1. Create your own CKEditor

For more details, check this [official tutorial](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/installing-plugins.html).

```bash
git clone -b stable https://github.com/ckeditor/ckeditor5-build-classic.git
cd ckeditor5-build-classic
yarn install
```

You may test your own build with default settings before install this plugin.

```bash
yarn build
```

After the build, you will get a custom CKEditor in `build` folder.

## 2. Install this plugin

In your custom CKEditor build, install this plugin in package manager.

```bash
yarn add -D @gtomato/ckeditor5-strapi-upload-plugin
```

Go to `src/ckeditor.js`, make the following changes to load this plugin.

```diff
+import { StrapiUploadAdapter } from '@gtomato/ckeditor5-strapi-upload-plugin';

export default class ClassicEditor extends ClassicEditorBase {}

// Plugins to include in the build.
ClassicEditor.builtinPlugins = [
	...,
+	StrapiUploadAdapter
];

// Editor configuration.
ClassicEditor.defaultConfig = {...};

```

If you make any changes in `src/ckeditor.js`, you have to build again.

```bash
yarn build
```

## 3. Integrate Custom CKEditor 5 with Strapi (Without publish to NPM)

Follow the [official Strapi tutorial](https://strapi.io/blog/how-to-change-the-wysiwyg-in-strapi) to
replace draftjs with CKEditor 5.

After that, copy all the CKEditor build asset including

- `ckeditor.js`
- `translations` folder
- `ckeditor.map.js` (Optional)
  into `extensions/content-manager/admin/src/components/CKEditor`

Then, remove the original `@ckeditor/ckeditor5-build-classic` that you will manually
replace it with your custom build.

```bash
yarn remove @ckeditor/ckeditor5-build-classic
```

Last, modify `extensions/content-manager/admin/src/components/CKEditor` with
the following code snippet.

```js
import React from 'react'
import PropTypes from 'prop-types'
import CKEditor from '@ckeditor/ckeditor5-react'
import styled from 'styled-components'
import { auth } from 'strapi-helper-plugin'

// replace with your custom build
import ClassicEditor from './ckeditor'

const Wrapper = styled.div`
  .ck-editor__main {
    min-height: 200px;
    > div {
      min-height: 200px;
    }
  }
`

const Editor = ({ onChange, name, value }) => {
  const uploadUrl = `${strapi.backendURL}/upload`
  const headers = {
    Authorization: 'Bearer ' + auth.getToken(),
  }

  return (
    <Wrapper>
      <CKEditor
        editor={ClassicEditor}
        data={value}
        onChange={(event, editor) => {
          const data = editor.getData()
          onChange({ target: { name, value: data } })
        }}
        config={{
          strapiUpload: {
            uploadUrl,
            headers,
          },
        }}
      />
    </Wrapper>
  )
}

Editor.propTypes = {
  onChange: PropTypes.func.isRequired,
  name: PropTypes.string.isRequired,
  value: PropTypes.string.isRequired,
}

export default Editor
```

Finally, build and restart Strapi server.

```bash
npx strapi build && npx strapi develop
```

Done 👍!

## Trouble Shooting

### ckeditor-duplicated-modules

1. Please ensure your custom CKEditor 5 build dependencies version `>= 19.0.0`
1. After update/check the dependencies, try to have a clean build for you CKEditor 5

```bash
rm -rf node_modules && yarn install
yarn build
```

3. Use `npm ls`, search `@ckeditor` to see if there is duplicate modules.

If the problem still exist, please read [the official documentation](https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-ckeditor-duplicated-modules),

---
_Source: https://npm.io/package/@gtomato/ckeditor5-strapi-upload-plugin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._