Mgsy
commented
4 years ago Currently, it's not possible to build the editor from the source using Next.js. I think it's related to a webpack configuration and Next.js webpack config requires some adjustments to make it compatible with CKEditor 5.
However, it's possible to run CKEditor 5 build inside Next.js application. To everyone struggling with the integration, please check the below workaround based on StackOverflow answer:
- Create a new Next.js application using
create-next-app. - In your Next.js project run:
npm install --save @ckeditor/ckeditor5-build-classic @ckeditor/ckeditor5-react- Paste the following code to your
pages/index.jsfile:
import React, { useState, useEffect, useRef } from 'react'
export default function MyEditor () {
const editorRef = useRef()
const [ editorLoaded, setEditorLoaded ] = useState( false )
const { CKEditor, ClassicEditor } = editorRef.current || {}
useEffect( () => {
editorRef.current = {
CKEditor: require( '@ckeditor/ckeditor5-react' ),
ClassicEditor: require( '@ckeditor/ckeditor5-build-classic' )
}
setEditorLoaded( true )
}, [] )
return editorLoaded ? (
<CKEditor
editor={ ClassicEditor }
data='<p>Hello from CKEditor 5!</p>'
onInit={ editor => {
// You can store the "editor" and use when it is needed.
console.log('Editor is ready to use!', editor)
} }
onChange={ (event, editor ) => {
const data = editor.getData()
console.log( { event, editor, data } )
} }
/>
) : (
<div>Editor loading</div>
)
}- Run
yarn devand open the application.
The above solution uses our official classic editor build, however, you can customize a build "outside of the Next.js integration" and load it the same way. Also, you can use CKEditor 5 online builder to get a ready-to-use build with a set of desired plugins.
seta-hainguyen
FilipaBarroso
sethcwhiting
adrianmaycon
wwalc
perezjoyce
hscstudio
jorissparla
afk-mario
OrionLayton
Emyboy
jeffryang24
sunkid1995
EthanStandel
mtkFreexe
jsbimra
lazarok09
That following code be above of your body and you have to import Head from 
laurencefass
tetaplaun
digitriss
viperfx
amirshnll
deokchanjeong
michvic
40fathoms
Witoso
yogithesymbian
chiragOctet
📝 Provide a description of the new feature
Provide a guide for integrating CKEditor 5 with Next.js.
[Update 2 from @Witoso]
New installation methods shipped in v42.0.0 work seamlessly with Next.js. Check Next.js integration guide.
[Update]
Hello everyone 👋!
We published an article in our docs, about the Next.js integration. I want to thank community members that shared the examples below.
That said, there's still work in front of us to make this integration smoother. And we aim to fix it in its roots. I invite everyone to check our new installation methods RFC: #15502.
If you'd like to see this feature implemented, add a 👍 reaction to this post.