Issue #1896💬 RespondidoAbierto el 16 de marzo de 2019por kaoz70Reacciones 2

El componente del plugin personalizado no es reconocido

Respuesta rápidapor artf1

Como ves, su tipo es 'div'... por eso nunca llega al otro tipo... Mira por qué y dónde se declara ese tipo

Lee la respuesta completa abajo ↓

Pregunta

Fragmento de códigoTEXT
SO: Windows 10 x64
Navegador: Chrome 72.0.3626.121 x64
GrapesJS: v0.14.55

Hola, tengo algunos componentes personalizados (pestañas de arranque) en un plugin, por alguna razón algunos componentes del plugin no son detectados por GrapesJS al cargarlo desde los elementos del contenedor, y otros arrastrando y soltando en el editor.

### Este componente no está siendo detectado:

const defaultType = dc.getType('default');
    const defaultModel = defaultType.model;
    const defaultView = defaultType.view;
    const {tabPanesName, tabPaneSelector} = constantes;
    const classId = config.classTabPanes;
    tipo const = tabPanesName;

dc.addType(type, {

model: defaultModel.extend({
            Predeterminados: {
                ... defaultModel.prototype.defaults,
                nombre: 'Contenido de la pestaña',
                copiable: 0,
                Arrastrable: Cierto,
                Droppable: tabPaneSelector,
            },
        }, {
            isComponent(el) {
                if (elHasClass(el, 'tab-content')) {
                    return {type};
                }
            },
        }),

Vista: {eliminado porque demasiado grande para el problema},
    });

### Pero este sí es:

const defaultType = dc.getType('default');
    const defaultModel = defaultType.model;
    const defaultView = defaultType.view;
    const { navigationName, tabSelector } = constantes;
    tipo const = navigationName;

dc.addType(type, {

model: defaultModel.extend({
            Predeterminados: {
                ... defaultModel.prototype.defaults,
                nombre: 'Navigation',
                copiable: 0,
                Arrastrable: Cierto,
                Desplegable: Selector de tabs,

Rasgos: [
                    {
                        tipo: 'class_select',
                        Opciones: [
                            {valor: 'nav-tabs', nombre: 'Tabs'},
                            {valor: 'pastillas de navegación', nombre: 'Pastillas'},
                        ],
                        etiqueta: 'Tipo',
                    },
                    {
                        tipo: 'class_select',
                        Opciones: [
                            {valor: '', nombre: 'Izquierda'},
                            {valor: 'nav-fill', nombre: 'Fill'},
                            {valor: 'nav-justified', nombre: 'Justificar'},
                        ],
                        etiqueta: 'Layout',
                    },
                ],
            },
        }, {
            isComponent(el) {
                if (el.className && el.getAttribute('role') === 'tablist') {
                    return {type};
                }
            },
        }),

Vista: {eliminado porque demasiado grande para el problema},
    });

### Código de inicio

var editor = grapesjs.init({
        Altura: '100%',
        Offsets: 1,
        avisoOnUnload: 0,
        storageManager: { autoload: 0 },
        Contenedor: '#gjs',
        fromElement: cierto,
        mostrarDispositivos: falso,
        Plugins: ['grapesjs-bloques-bootstrap4'],
        pluginsOpts: {
          'grapesjs-bloques-bootstrap4': {
            bloques: {},
            bloqueCategorías: {},
            Etiquetas: {},
            panelDispositivosGridDevices: cierto,
            Accionespredefinidasform: [
              {nombre: 'Contact', valor: '/contact'},
              {nombre: 'aterrizaje', valor: '/aterrizaje'},
            ]
          }
        },
        lienzo: {
          Estilos: [
            'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css'
          ],
          guiones: [
            'https://code.jquery.com/jquery-3.3.1.slim.min.js',
            'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js',
            'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js'
          ],
        }
      });
      window.editor = editor;

### HTML
Este es el HTML que está dentro del elemento #gjs y que GrapesJS debería analizar en componentes:

<div class="container">

<!-- Navegación de pestañas -->
        <ul class="nav nav-tabs" role="tablist">
          <li class="nav-item">
            <a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#profile" role="tab">Perfil</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#messages" role="tab">Mensajes</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#settings" role="tab">Configuración</a>
          </li>
        </ul>
        <!-- Paneles de pestañas -->
        <div class="tab-content">
          <div class="tab-pane active" id="home" role="tabpanel">Home</div>
          <div class="tab-pane" id="profile" role="tabpanel">Profile</div>
          <div class="tab-pane" id="mensajes" role="tabpanel">Mensajes</div>
          <div class="tab-pane" id="settings" role="tabpanel">Configuración</div>
        </div>

</div>

</div>

### Problema
El problema parece estar en el método isComponent(el), el parámetro "el" nunca es ese elemento en particular, así que nunca devuelve el tipo válido.

¿Cuál podría ser el problema?

Respuestas (3)

artf3 de abril de 2019

Como ves, su tipo es 'div'... por eso nunca llega al otro tipo... Mira por qué y dónde se declara ese tipo

kaoz703 de abril de 2019

¡Vale, ese era el problema! Pensaba que el tipo 'div' era uno por defecto establecido por GrapesJS. ¡Gracias por toda la ayuda!

artf23 de marzo de 2019

Podría ser ese método 'elHasClass'?!?

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.