Issue #1183💬 RespondidoAbierto el 7 de junio de 2018por syncubecommerceReacciones 1

Grapesjs Plugins no cargan por segunda vez en React SPA

Respuesta rápidapor artf1

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)

fernandoagarcia15 de junio de 2018

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.

fernandoagarcia17 de junio de 2018

@artf sí, ¡eso hizo el trabajo perfectamente, gracias!

Preguntas y respuestas relacionadas

Continúa investigando con debates sobre temas similares.

Plugins de pago que cumplen con este problema

Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.

Ver todos los plugins

Cargando recomendaciones de plugins de pago...

Opción gratuita

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 →
Opción premium

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.

Todos los tutoriales →

Explorar categorías de plugins

Ve directamente a las páginas de categorías de plugins en el marketplace.