El componente del plugin personalizado no es reconocido
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
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)
Como ves, su tipo es 'div'... por eso nunca llega al otro tipo... Mira por qué y dónde se declara ese tipo
¡Vale, ese era el problema! Pensaba que el tipo 'div' era uno por defecto establecido por GrapesJS. ¡Gracias por toda la ayuda!
Podría ser ese método 'elHasClass'?!?
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #1535
[Bug]: Después de eliminar un componente personalizado, la vista del rasgo no se limpia
Hola, Estoy usando la biblioteca grapesjs versión 0.14.33. He creado algunos componentes personalizados y he notado que al eliminar los com...
Issue #1658
[BUG] El rasgo de casilla de verificación no carga como marcado incluso cuando el valor del rasgo es verdadero
Hola, Estoy usando la versión 0.14.33 de Grapesjs. Estoy cargando algunos componentes cuando carga el formulario y tengo un componente con...
Issue #1756
Arrastrar y soltar no funciona en la ventana del editor redimensionada en Google Chrome
Hola, he desarrollado algunos componentes y todo funciona bien en Firefox, navegador Opera. En Google Chrome también funciona bien solo en...
Issue #1841
Nombre de los componentes
Tengo dos preguntas.¿Hay alguna forma de cambiar el nombre del componente integrado? Quería cambiar el nombre "Box" por "Div". Así que el m...
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.