CKEditor 5 Strapi Upload Adapter Plugin
- You need to create your custom build of CKEditor.
- Register this plugin into your custom build
- 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) intoextensions/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
- Please ensure your custom CKEditor 5 build dependencies version
>= 19.0.0
- After update/check the dependencies, try to have a clean build for you CKEditor 5
rm -rf node_modules && yarn install
yarn build
- Use
npm ls
, search@ckeditor
to see if there is duplicate modules.
If the problem still exist, please read the official documentation,