Next.js integration #7376
Comments
Mgsy
added
type:feature
|
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:
npm install --save @ckeditor/ckeditor5-build-classic @ckeditor/ckeditor5-react
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>
)
}
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. |
|
@Mgsy your solution works fine with basic use but got errors when I integrated with CKEditor Plugins like Easy Image or Alignment. Seems regarding to webpack configurtion: _error - ./node_modules/@ckeditor/ckeditor5-ui/theme/icons/dropdown-arrow.svg 1:0
|
|
I was trying to follow the tutorial to create a simple plugin but I'm having the issue mentioned in #7343, because I'm importing the @ckeditor/ckeditor5-ui and @ckeditor/ckeditor5-core packages. I assume the same issue will arise in other packages as well, for anyone working with Next.js. Could you please provide compiled packages or a workaround for this? Thanks for your attention. |
|
@Mgsy Just for context, Filipa is on my team (I'm the guy who originally raised the issue). We were doing great with the online build tool for a while, but we're now at the point where we need to add our own plug-in and the online build has become insufficient for our needs. If there's any way you could push offering compiled versions of your individual packages up your priority list, that would help us out tremendously. Until then, we'll probably need to handle this in some hacky way, which we really don't want to do. Thanks so much! |
|
How do I enable the upload image option? |
|
Might be useful: https://medium.com/@aisynurul99/custom-ckeditor-5-next-js-d6ef5cc7dd93 (did not review it) |
I have the same issue. Were you able to resolve this? |
|
Solve with this simple step
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import CKEditor from '@ckeditor/ckeditor5-react';
const Editor = (props) => {
return (
<CKEditor
editor={ ClassicEditor }
data={props.value}
onChange={ (event, editor ) => {
const data = editor.getData()
props.onChange(data)
} }
/>
)
}
export default Editor;
import dynamic from 'next/dynamic'
const Editor = dynamic(() => import('../components/Editor'), { ssr: false })
const Home = () => {
return (
<Editor value="" onChange={(v)=> console.log(v)} />
)
}
export default Home; |
|
@hscstudio @Mgsy both solutions result in an unhandled Runtime Error Check the render method of Call Stack AND Unhandled Runtime Error Check the render method of |
Show your code? |
|
Here it is https://github.com/jorissparla/x. Very basic. |
|
|
|
change in Your packages to this version but I see working example |
|
that worked, Also the second link worked. Need to play around to see what is causing the issues in my basic example. |
|
moving from "@ckeditor/ckeditor5-react": "^2.1.0", to "@ckeditor/ckeditor5-react": "^3.0.0", breaks the example. |
|
Customized editor (with plugins) was really easy following the following docs and using the online builder. |
|
@afk-mario Would you mind sharing how you got CKEditor plugins working with Next? I keep running into the "Global CSS cannot be imported from within node_modules" error when trying to set up ExportPdf. |
import React, { Component } from 'react';
// When you add the ckeditor5 folder you can import it this way
import Editor from 'ckeditor5-custom-build/build/ckeditor';
import { CKEditor } from '@ckeditor/ckeditor5-react'
const editorConfiguration = {
toolbar: [ 'bold', 'italic' ]
};
function Editor () {
return (
<CKEditor
editor={ Editor }
config={ editorConfiguration }
data="<p>Hello from CKEditor 5!</p>"
onChange={ ( event, editor ) => {
const data = editor.getData();
console.log( { event, editor, data } );
}
/>
);
}
export default Editor;Finally when you import this component make sure you are skipping server side rendering. import React from 'react';
import dynamic from 'next/dynamic';
const Editor = dynamic(() => import('./components/editor'), {
ssr: false,
});
function App = () => {
return (
<div>
<Editor />
</div>
);
};
export default App;If you need plugins outside of the ones that the online builder has support for I think you can create a custom build by yourself but didn't tried that, the process after getting the custom build should be similar. |
|
@Mgsy I'm getting and get this during development. |
|
From my experiment, I got // // pages/_app.js (got from nextjs documentation: https://nextjs.org/docs/advanced-features/custom-app)
// Only uncomment this method if you have blocking data requirements for
// every single page in your application. This disables the ability to
// perform automatic static optimization, causing every page in your app to
// be server-side rendered.
//
// MyApp.getInitialProps = async (appContext) => {
// // calls page's `getInitialProps` and fills `appProps.pageProps`
// const appProps = await App.getInitialProps(appContext);
//
// return { ...appProps }
// } |
|
Finally, I used cancellablePromise, React Mutable Ref, and dynamic import to solve that. But, currently I'm facing a performance issue when rendering more than 10 CKEditor with dynamic import, this will make the browser unresponsive. Still find a way to minimize this performance issue.
|
same issue! |
|
Just wanted to throw my two cents in this thread. I integrated CKEditor into Next using the |
|
Is there any answers for ck editor plugin(Font) integration in Nextjs |
|
in my case i used custom build ckeditor version. my reference:
|
|
Uploaded an example project to my repository. |
|
I don't want to use the Online builder path (custom build) but Building the editor from source (directly inside my project), but I can't configure the webpack in my next.config.js, to solve the css import issue. and I get the following error:
reasons to use ckeditor5 like this, is because I'm using typescript and that way I don't need to be creating d.ts files for the custom build, because the Custom builds produced by the online builder and DLL versions of packages provided by CKEditor 5 do not provide built-in typings yet. another advantage is to create custom Plugins and Commands. becauese when I import and extend the Commands class in my project (@ckeditor/ckeditor5-core) I keep throwing the css error |
The global CSS issue is old.. but if you consider yourself a luck guy, try to download this library and config your webpack https://www.npmjs.com/package/@zeit/next-sass i don't think will work at all, i have the same issue myself in another project. See more about because this is a issue ina Next.js project vercel/next.js#27953 |
|
I'm trying to use the Online builder in my application. I downloaded the customized editor file, added it to my application folder, at the same level as In development environment, it works perfectly fine. All features are performing according to my needs, and no errors occur. The issue arises when I try to ship this code to production. The Within the build, the However, during the build, this error occurs: After some research, I still can't fathom what I'm doing wrong and why this error only occurs when deploying to production, so I'd like to ask for some help regarding this. The application is deployed to AWS. This is (part of) the code showcasing how my editor is being used: In the build logs, the |
|
Hey @40fathoms, unfortunately, I couldn't reproduce the issue on this setup. Both the dev and prod build work fine. The only difference I have is the path, not sure why you use import dynamic from 'next/dynamic'
const CKEditorComponent = dynamic(() => import('@source/components/CKEditorComponent'), {
ssr: false // ^^^^^^^
})Another, very dummy idea, but make sure that the |
|
Hello @Witoso The It works perfectly well in development, but importing the But thanks for reaching me out! |
martynawierzbicka
added
support:2
godai78
added
squad:core
|
Hello everyone 👋! We published an article in our docs, about the Next.js integration. I want to thank community members that shared examples above. 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. |
i have same issue |
why paragraph heading is not working ? i use typescript instead for my nextjs. index.tsx |
|
@yogithesymbian could you provide a reproducible sample, e.g., on StackBlitz? |
|
I am getting a flickering issue when i have added this line & also when I enter any data into other fields it makes an flickering effect. |
|
Hello everyone, happy to report that we finished the looong work in #15502, and the new installation methods shipped in v42.0.0 make the Next.js integration much, much easier 🥳 Test the new setup with the Next.js integration guide, and let us know what you think! |
|
Brilliant work thank you! Do you plan to render any/all of the component server side in the future? Thanks |
Yep, we plan to investigate this as well, we need access to the browser's APIs so fully-server-rendered mode might be tricky, but we'll see. |
This seems not to work with external components library? I used the guide and installed were: "@ckeditor/ckeditor5-react": "^9.3.1",
"ckeditor5": "^43.2.0",I have wrapped the The frontend application depends on the components library. On install, the components are transpiled with babel. As soon as I import the TextEditor, even if my page has This happens when importing with and also when using the dynamic import as described in the guide: |
and others
📝 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.
The text was updated successfully, but these errors were encountered: