Grapesjs Plugins not loading second time in React SPA
Question
Hello,
I'm trying to add a grapesjs editor to my React SPA. I'm initializing editor this way:
componentDidMount() {
const editor = grapesJs.init(config);
}
config variable has the following configuration:
plugins: ['gjs-preset-newsletter', 'gjs-aviary', 'gjs-plugin-ckeditor'],
pluginsOpts: {
'gjs-preset-newsletter': {
modalLabelImport: 'Paste all your code here below and click import',
modalLabelExport: 'Copy the code and use it wherever you want',
codeViewerTheme: 'material',
cellStyle: {
'font-size': '12px',
'font-weight': 300,
'vertical-align': 'top',
color: 'rgb(111, 119, 125)',
margin: 0,
padding: 0,
}
}
The first time everything is working fine. When I navigate to another page of my single page app and get back - plugins are not loaded.
I tried to delete an instance of editor in componentWillUnmount() but it didn't help.
I tried to found solutions in issues but had no luck. Maybe I need somehow destroy editor in componentWillUnmount()?
Appreciate for your help.
Answers (3)
editor.destroy() method is available from https://github.com/artf/grapesjs/releases/tag/v0.14.20
I am having the a simliar issue. Except I am using VueJs. When I leave the page and comeback to it the editor runs the plugin again. This causes the editor to be unusable until I resize using the device preview but if I drag a block into the canvas it drops two times...one on where I dropped and the other down at the bottom.
@artf yup that did the job perfectly ty!
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1935
Adding multiple plugins together
Hello all, I have encountered a problem when trying to add 2 plugins together for example: grapesjs-preset-webpage and grapesjs-plugin-cked...
Issue #1753
[Bug/Question] StyleManager - SectorsView - addToCollection() uses "name" attribute to build the ID and fails with several spaces or special characters
Hi @artf , Using the pluginOpts property from the grapesjs.init() method, I customized the sectors displayed on the Style Manager (through...
Issue #438
Imported HTML, I can move components but not edit them
All I did was import HTML, except I can't modify the text in the HTML I can't type anything or remove any text
Issue #924
[Bug]: calling 'preview' command not working correctly
This is a piece of code that i am an using: this.editor = grapesjs.init(this.config) const commandManager = this.editor.Commands commandMan...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.