Support Next.js #211
Comments
const Editor: React.ComponentType<any> = dynamic(
() => {
return new Promise(resolve =>
import("froala-editor/js/plugins.pkgd.min.js").then(e => {
import("react-froala-wysiwyg").then(resolve);
})
);
},
{
loading: () => null,
ssr: false
}
); |
|
@zzossig @edsora-coder I also was searching for an answer to this... You probably don't need this anymore... just for anyone out there... here's my solution -- allows you to (independently) load any number of files. const FroalaEditor = dynamic(
async () => {
const values = await Promise.all([
import("react-froala-wysiwyg"), // must be first import since we are doing values[0] in return
import("froala-editor/js/plugins/image.min.js")
]);
return values[0];
},
{
loading: () => <p>LOADING!!!</p>,
ssr: false
}
); |
|
+1 |
|
@ashokkumarsand can you paste your code here? |
|
importing with import statement is not working I got the below error |
|
@ashokkumarsand Can you paste the entire code here? It would be easier to help you that way. |
|
I am using nextjs. when I uncomment any import to use the plugin got the above error. It's very hard to use and things are not straight forward |
|
@ashokkumarsand I think you're saying you are having an issue importing the plugins while importing the main editor works. In any case, you can't import most (maybe all) of the froala files directly. They need to wrapped with dynamic since they require the window object. So try this based on my previous code #211 (comment) const FroalaEditor = dynamic(
async () => {
const values = await Promise.all([
import("react-froala-wysiwyg"), // must be first import since we are doing values[0] in return
import("froala-editor/js/plugins.pkgd.min.js")
]);
return values[0];
},
{
loading: () => <p>LOADING!!!</p>,
ssr: false
}
); |
|
it's working thank you. |
|
My pleasure |
|
Closing due to inactivity on this issue |
|
my import("froala-editor/js/plugins.pkgd.min.js") is not correctly working i am using the same approach |
|
@nitin-kumar-bs can you share a bit more code? |
|
yes @muyiwaoyeniyi below is my code |
|
@nitin-kumar-bs do you have a loading view? I see that it's blank. |
|
@muyiwaoyeniyi , yes after adding the loading icon still all plugins buttons are not visible. below is my latest code // import Tribute from "tributejs"; import dynamic from "next/dynamic"; const ENTER_KEY = 13; class FroalaEditor extends React.Component { } componentDidMount() { handleModelChange = (model) => { componentDidUpdate(prevProps) { render() { } export default FroalaEditor; |
|
@nitin-kumar-bs I ran your code. It does have some errors as the Loading icon is missing and the next/Head import is incorrect. Also, I turned off all the tribute code since I don't have that on my end. Here's what I got |
@muyiwaoyeniyi thanks for the reply now i have removed the loading, next/Head and tribute.js but still I am not able to see the plugins buttons and one thing I noticed that when I hover over on "import("froala-editor/js/plugins.pkgd.min.js")" in VSCODE it's giving some error please find the attached file. Below is the latest code please let me know where am I doing wrong. import dynamic from "next/dynamic"; const ENTER_KEY = 13; class FroalaEditor extends React.Component { componentDidMount() { handleModelChange = (model) => { componentDidUpdate(prevProps) { render() { } export default FroalaEditor; |
|
Hi @muyiwaoyeniyi , Issue is fixed now by updating the version earlier I was using 4.0.9 thanks for the help |
|
@nitin-kumar-bs My pleasure! |
|
@muyiwaoyeniyi I'm having issue in uploading image to s3 in froala-editor using imageUploadToS3 config, can you help me fix that? |
|
@RamGupta07 Sure. Are you getting an error? Can you post a screenshot? |
|
@muyiwaoyeniyi Please check this once : #376 |
|
OK I will respond on that issue |
|
I am Using Froala in Nextjs With Dynamic Import While that's my simple code! import dynamic from "next/dynamic"; const FroalaEditor = dynamic( LOADING!!! ,ssr: false } ); const FroalaEditorComp = () => { return ( }; export default FroalaEditorComp; I need help if anyone knows about this! |
You need to add the css // import "froala-editor/css/froala_style.min.css"; |
I'm using [email protected] and [email protected],
When I used react-froala-wysiwyg v2, all worked fine.
But after upgrade to v3, It seems that import is not working.
For example, in v2, the following import code works well. but in v3, this code not importing plugins.pkgd.min.js file
As a result, toolbar buttons are not showing up correctly.
The text was updated successfully, but these errors were encountered: