Suneditor: Layout of the page is broken when revisiting the editor and upload image/video again after successfully uploading and submitting content with image/video the first time

[ducatrinh]

This issue is happening in React project

[JiHong88]

Hi
Please tell me a more detail.

[ducatrinh]

Hi,

I encountered this issue when taking the following steps:

1. Insert an image in the editor
2. Save content with the uploaded image (handled in back-end)
3. After saving the content successfully in the database, push to another route in the page
4. Get back to the link with the editor and try to insert an image in the editor
5. Layout of the page is broken

I guess this issue happens because in a React project the page is not reloaded after submitting the content. When I reload the page, I can insert an image normally, but I shouldn't have to do that in a React project

[JiHong88]

Hi,
Sorry for the late reply.
I don't understand number 4.

The saved contents will be a string.
That if you put this content back in the editor, the editor's layout is broken?
How did you put it?

[ducatrinh]

Hi,

I tried to insert not the saved content but another image in the editor. This step is after saving the previous content successfully in the database and it's pushed to another route (note that this is not refresh since it's built in React).

[JiHong88]

Ok.
How did you insert the image?
Did you click the editor's button to insert it?

[ducatrinh]

Yes, I clicked that button
As I remembered, this issue also happens with insert video

[JiHong88]

What happens a page after saving?
Please tell me the state of the editor after saving.
And can you show me how the editor's layout is broken?

[Datyriam]

I had a similar problem in my React project -
fixed it by simply, in componentWillUnmount, destroying the object suneditor.create(..) returned on componentDidMount ( or in my case, or in any case when data has to come from the server first, componentDidUpdate)

[JiHong88]

Hi @Datyriam
Is this an issue of "SunEditor" or an issue of "react-suneditor"?

[Datyriam]

@JiHong88 this was on "SunEditor", this project was before "react-suneditor" was released - haven't given "react-suneditor" a shot yet (nor do I have any current projects that need it yet)

[JiHong88]

@Datyriam @ducatrinh
I haven't understand this issue yet.
What exactly is the problem?

[Datyriam]

@JiHong88 on my end the issue was primarily because React apps are generally SPA apps, and "SunEditor" didn't natively had a wrapper for component mount/dismount, so unless you specifically destroyed the Suneditor object, it would persist in memory, potentially causing memory leaks (but mostly exceptions and JS errors on each subsequent page load where it tried to re-create the suneditor object) - this also has the potential to cause the errors OP mentioned

This was probably fixed in the release of "react-suneditor", haven't tested that yet

[ducatrinh]

I'm not sure if this was fixed or not. Last time I tested with 'react-suneditor' package, I encountered this problem.

[mkhstar]

Hi @ducatrinh,
At componentWillUnmount i call the editor's destroy method. @JiHong88 does the destroy method destroy the editor?

[mkhstar]

@Datyriam if you were able to solve this issue you could open a pull request

[JiHong88]

@mkhstar Yeah, destroyed all tags core.js#L6456

[mkhstar]

Please @ducatrinh can you confirm that this issue still persists in suneditor-react 2.11.3 ?