Issue #2778💬 RespondidoAbierto el 15 de mayo de 2020por ashishtydReacciones 0

BUGS - No se puede leer la propiedad 'querySelector' de null en r.getBody

Respuesta rápidapor artf

Por favor, crea una demo reproducible.

Lee la respuesta completa abajo ↓

Pregunta

Hola

Fragmento de códigoTEXT
Intentaba usar grapesjs en las páginas de Visualsource.
A continuación se presenta la función de iniciación - 
'initEditor: function(){
                var self = esto;
                this.editor = grapesjs.init({
                    Contenedor: '#gjs',
                    fromElement: cierto,
                    Altura: '500px',
                    Ancho: 'Auto',
                   storageManager: false,
                    paneles: { predeterminados: [] },
                    blockManager: {
                        appendTo: '#blocks',
                        bloques: self.wcComponents
                    },
                 });

this.editor.runCommand('sw-visibility');
                this.editor.Panels.addPanel({
                    id: 'Acciones-básicas',
                    EL: '#canvas-panel',
                    botones: [
                      {
                        id: 'exportar',
                        NombreClase: 'btn-open-export slds-botón slds-button_brand',
                        etiqueta: 'Exportar a HTML',
                        comando: 'export-plantilla',
                        contexto: 'export-plantilla', // Para agrupar el contexto de botones del mismo panel
                      }, {
                        id: 'show-json',
                        NombreClase: 'btn-show-json slds-button slds-button_brand',
                        etiqueta: 'Exportar a JSON',
                        Contexto: 'show-json',
                        comando(editor) {
                          editor. Modal.setTitle('Components JSON')
                            .setContent('<textarea style="width:100%; height: 250px;">
                              ${JSON.stringify(editor.getComponents())}
                            ')</textarea>
                            .open();
                        },
                      },
                      {
                        id: 'show-css',
                        NombreClase: 'btn-show-json slds-button slds-button_brand',
                        etiqueta: 'Exportar CSS',
                        Contexto: 'show-CSS',
                        comando(editor) {
                          editor. Modal.setTitle('Editor CSS')
                            .setContent('<textarea style="width:100%; height: 250px;">
                              ${JSON.stringify(editor.getCss())}
                            ')</textarea>
                            .open();
                        },
                      },
                      {
                        id: 'avance del espectáculo',
                        NombreClase: 'btn-show-json slds-button slds-button_brand',
                        etiqueta: 'Avance',
                        Contexto: 'show-CSS',
                        Orden: 'Núcleo: Vista previa',
                      }
                    ],
                  });
                  
newElement: {wcId: "", TagName: "", TagType: "", OnEvent: {}, Propiedades: {classes: [], Atributos: [], Style: []} };,
                  this.editor.on('component:add', (element, argument) => {
                    console.log("component:add", element, argument);
                    var id = element.ccid;
                    element.atributos.atributos['data-wcId'] = id;
                    self.newElement.TagName = element.attributes.tagName;
                    self.newElement.wcId = id;
                    self.newElement.Properties.Attributes = elemento.atributos.atributos;
                    
for(var i=0; i < element.attributes.classes.models.length; i++){
                      self.newElement.Properties.classes.push(element.atributos.clases.modelos[i].atributos.nombre);
                    }
                    auto.constructorElementos.empujar(yo.nuevoElemento);
                    auto.resetnewElement();
                  })

this.editor.on('component:remove', (some, argument) => {
                    console.log argumento ("component:remove", algunos);
                  })

this.editor.on('component:selected', (selectedComponent, argument) => {
                    selectedCopmMetadata = {};
                    auto.seleccionadoComp = selectComponent;
                    auto.mostrarPropiedadTab();
                    console.log("component:selected", selectedComponent, argument);
                    
_.each(selectedComponent.getAttributes(), function(value, key){
                      console.log(valor, clave);
                      if(key == "data-wcId"){
                        self.selectedCopmMetadata = _.findWhere(self.builderElements, {wcId : value});
                        console.log(self.selectedCopmMetadata);
                      }
                      self.selectedCopmMetadata.setClass('slds-input test');
                    })
                  })

this.editor.on('bloque:arrastrar:iniciar', (dropBlock, argumento) => {
                    console.log("inicio de arrastre de bloque");
                    console.log(auto.editor.Canvas.getElement());
                  })
                  
},`

Esta función añade perfectamente el creador de páginas de uvas pero aparece el error de seguimiento en consola.
! [Sangre de uva](https://user-images.githubusercontent.com/32833748/82032201-8653a900-96b8-11ea-916e-ce40ac226dcf.png)

Respuestas (2)

artf19 de junio de 2020

Por favor, crea una demo reproducible.

no-response[bot]29 de junio de 2020

Este asunto se ha cerrado automáticamente porque no ha recibido respuesta a nuestra solicitud de más información por parte del autor original. Con solo la información que actualmente hay en el asunto, no tenemos suficiente información para actuar. Por favor, contacta con nosotros si tienes o encuentras las respuestas que necesitamos para que podamos investigar más a fondo.

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 →

Explorar categorías de plugins

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