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.

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.

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.

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

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

+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.

yarn build

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

Follow the official Strapi tutorial 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.

yarn remove @ckeditor/ckeditor5-build-classic

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

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.

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
2. After update/check the dependencies, try to have a clean build for you CKEditor 5

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,