Grapesjs Plugins no cargan por segunda vez en React SPA
El método 'editor.destroy()' está disponible en https://github.com/artf/grapesjs/releases/tag/v0.14.20
Lee la respuesta completa abajo ↓Pregunta
Hola,
Estoy intentando añadir un editor grapesjs a mi React SPA. Estoy inicializando el editor de esta manera:
componentDidMount() {
editor const = grapesJs.init(config);
}
La variable de configuración tiene la siguiente configuración:
Plugins: ['GJS-Preset-Newsletter', 'GJS-Aviary', 'GJS-plugin-CKEDITOR'],
pluginsOpts: {
'gjs-preset-newsletter': {
modalLabelImport: 'Pega todo tu código aquí abajo y haz clic en importar',
modalLabelExport: 'Copia el código y úsalo donde quieras',
codeViewerTheme: 'material',
cellStyle: {
'tamaño de fuente': '12px',
'peso de fuente': 300,
'vertical-align': 'arriba',
color: 'rgb(111, 119, 125)',
marje: 0,
relleno: 0,
}
}
La primera vez todo funciona bien. Cuando navego a otra página de mi app de una sola página y vuelvo, los plugins no están cargados.
Intenté borrar una instancia del editor en componentWillUnmount() pero no ayudó.
Intenté encontrar soluciones en los problemas pero no tuve suerte. ¿Quizá necesito destruir el editor en componentWillUnmount()?
Agradezco tu ayuda.
Respuestas (3)
El método 'editor.destroy()' está disponible en https://github.com/artf/grapesjs/releases/tag/v0.14.20
Tengo un problema similar. Excepto que estoy usando VueJs. Cuando salgo de la página y vuelvo a ella, el editor vuelve a ejecutar el plugin. Esto hace que el editor sea inutilizable hasta que redimensiono usando la vista previa del dispositivo, pero si arrastro un bloque al lienzo, se cae dos veces... una en el lugar donde caí y la otra abajo.
@artf sí, ¡eso hizo el trabajo perfectamente, gracias!
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #957
[Pregunta] Añadir atributos personalizados (datos-) a los recursos/imágenes al subir/seleccionar
Hola, estoy haciendo todo lo posible por encontrar la mejor manera de hacerlo, pero necesito adjuntar dos etiquetas de datos HTML5 personal...
Issue #998
[BUG] El administrador de activos envía una solicitud vacía al subir la imagen
Descripción: El editor GrapesJS se inicializa en un archivo editor.html de la siguiente manera: 'localhost:9001' es un servidor IIS local q...
Issue #1156
Plugin gjs-style-gradient no encontrado
Hola @artf, Estoy teniendo este problema en el plugin de gradiente "Plugin gjs-style-gradient no encontrado". Utilizó el código siguiente p...
Issue #1912
[PREGUNTA] Componentes personalizados hijos por defecto
Hola, Estoy intentando entender cómo puedo lograr lo siguiente.Crear un componente con un contenido predeterminado como hijos.Crea un bloqu...
Plugins de pago que cumplen con este problema
Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.
Cargando recomendaciones de plugins de pago...
Consulta los plugins de código abierto de GrapesJS en GitHub O haz una búsqueda rápida en nuestro catálogo gratuito.
Explora plugins gratuitos →Los plugins premium incluyen soporte, actualizaciones regulares y funciones listas para producción — ahorrando días de trabajo de integración.
Explora plugins premium →Tutoriales relacionados
Guías detalladas sobre el mismo tema.
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.