Componet no es editable
rasgos no son visibles al hacer clic en el componente. Como estás haciendo clic en otro componente (el interno, que tiene sus propias características), si no necesitas que ese componente sea seleccionable, puedes usar la propiedad 'selectable' '<div data-gjs-selectable="false">...'
Lee la respuesta completa abajo ↓Pregunta
Tengo un componente personalizado y he aplicado editable=true, pero los elementos hijos no son editables, incluso intenté añadir data-gjs-editable=true y también intenté usar bloques básicos de componentes, pero todo el componente no es editable.
'var sliderType = 'hsbc-slider-1';
var createSliderComponent = function (comps, defaultModel, defaultView) {
var defaultType = comps.getType("default");
var defaultModel = defaultType.model;
var defaultView = defaultType.view;
comps.addType(sliderType, {
Defina el modelo
model: defaultModel.extend({
Extender propiedades predeterminadas
defaults: Object.assign({}, defaultModel.prototype.defaults, {
tipo: deslizadorTipo,
etiquetaNombre: 'div',
Copiable: Cierto,
removible: falso,
Estilizado: falso,
redimensionable: falso,
Editable: Cierto,
Badgable: Cierto,
Resaltable: Cierto,
atributos: {
'clase': 'contenedor deslizante',
'data-gjs-type': sliderType
}
}),
}, {
isComponent(el) {
si (el.getAttribute & &
el.getAttribute('data-gjs-type') == sliderType) {
return {
tipo: deslizador Tipo
};
}
}
}),
Definir la vista
view: defaultView
});
};`
`{
id: deslizador Tipo + "_block",
etiqueta: "Slider",
categoría: "Diseño",
atributos: {
Clase: "Icono-cuadro-deslizante del bloque GJS",
"data-gjs-hover-img": "https://team.global.hsbc/sites/LearningDevLib/hsbc_uni_images/Icons/grapes-js/slider.png"
},
Contenido: {
Tipo: 'HSBC-Deslizante-1',
activeOnRender: 1,
contenido : '<div class="slider-left-part"><h2 data-gjs-type="text">Ejemplo de título</h2><div class="slider-title" data-gjs-type="text">Lorem Ipsum</div><div class="slider-description" data-gjs-type="text">Sample Description</div><div class="slider-link"><a href="" data-gjs-type="link">Link</a></div></div><div class="slider-right-part"><img data-gjs-type="image" class="slider-image" src="https://via.placeholder.com/503x300"></div>'
}
}`
! [captura](https://user-images.githubusercontent.com/11716808/47214169-060e7a00-d395-11e8-8f7e-e53e8a7ec931.PNG)Respuestas (3)
rasgos no son visibles al hacer clic en el componente.
Como estás haciendo clic en otro componente (el interno, que tiene sus propias características), si no necesitas que ese componente sea seleccionable, puedes usar la propiedad 'selectable' '<div data-gjs-selectable="false">...'
Deberías poner el HTML no dentro de 'contenido' (en la definición de bloques), sino 'componentes'
@artf he puesto componentes dentro y si hago así, los rasgos no son visibles al pulsar en componente.
! [captura](https://user-images.githubusercontent.com/11716808/47285410-bc1ad380-d5e2-11e8-9ca9-57d18e7a4785.PNG)
'var sliderType = 'hsbc-slider-1';
var createSliderComponent = function (comps, defaultModel, defaultView) {
var defaultType = comps.getType("default");
var defaultModel = defaultType.model;
var defaultView = defaultType.view;
comps.addType(sliderType, {
Defina el modelo
model: defaultModel.extend({
Extender propiedades predeterminadas
defaults: Object.assign({}, defaultModel.prototype.defaults, {
tipo: deslizadorTipo,
etiquetaNombre: 'div',
Copiable: Cierto,
removible: falso,
Estilizado: falso,
redimensionable: falso,
Editable: Cierto,
Badgable: Cierto,
Resaltable: Cierto,
sTítulo: '',
sHeader: '',
sDescripción: '',
sLink: '',
sLinkTitle: '',
sSSrc: '',
sContent: '<div class="slider-left-part"><h2>Sample Title</h2><div class="slider-title">Lorem Ipsum</div><div class="slider-description">Sample Description</div><div class="slider-link"><a href="">Link</a></div></div><div class="slider-right-part"><img class="slider-image" src="https://via.placeholder.com/503x300"></div>',
sHeader: '',
atributos: {
'clase': 'contenedor deslizante',
'data-gjs-type': sliderType
},
rasgos: [{
Tipo: 'texto',
etiqueta: 'Texto de cabecera',
nombre: 'sHeader',
Provisional: 'por ejemplo. Bienvenido',
cambioprop: 1
}, {
Tipo: 'texto',
etiqueta: 'Título',
nombre: 'sTitle',
Provisional: 'por ejemplo. 'Enlace HSBC',
cambioprop: 1
}, {
Tipo: 'texto',
etiqueta: 'Descripción',
nombre: 'sDescription',
Provisional: 'por ejemplo. Escucha lo que dicen nuestros líderes sobre HSBC University y cómo puede ayudarte a aprender, desarrollarte y conectar.'
cambioprop: 1
},
{
tipo: 'select',
etiqueta: 'Título de enlace',
nombre: 'sLink',
Opciones: [{
valor: 'Acceso',
nombre: 'Access'
}, {
valor: 'Descubre más',
nombre: 'Descubre más'
}, {
valor: 'Ninguno',
Nombre: 'Ninguno'
}, {
valor: 'Leer más',
Nombre: 'Leer más'
}, {
valor: 'Registrar',
nombre: 'Registro'
}, {
valor: 'Aprendizaje basado en roles',
nombre: 'Aprendizaje basado en roles'
}, {
valor: 'Visitar sitio web',
nombre: 'Visitar sitio web'
}, {
valor: 'Ver vídeo',
nombre: 'Ver vídeo'
}],
cambioprop: 1
}, {
Tipo: 'texto',
etiqueta: 'Enlace para abrir',
nombre: 'sLinkTitle',
Provisional: 'por ejemplo. https://team.global.hsbc/sites/HSBCUni',
cambioprop: 1
}
]
}),
inicialize: función initialize(o) {
defaultModel.prototype.initialize.apply(esto, argumentos);
si (this.components() && !this.components().length) {
this.components(this.get('sContent'));
}
this.listenTo(this, 'change:sHeader', this.updateContent);
},
updateContent: función () {
this.find('h2')[0] && this.find('h2')[0].set("content", this.get('sHeader'));
this.find('div.slider-title')[0] && this.find('div.slider-title')[0].set("content", this.get('sTitle'));
this.find('div.slider-description')[0] && this.find('div.slider-description')[0].set("content", this.get('sDescription'));
this.find('a')[0] && this.find('a')[0].set("href", this.get('sLink'));
this.find('a')[0] && this.find('a')[0].set("content", this.get('sLinkTitle'));
this.find('img')[0] && this.find('img')[0].set("src", this.get('sSrc'));
}
}, {
isComponent(el) {
si (el.getAttribute & &
el.getAttribute('data-gjs-type') == sliderType || el.getAttribute('') =='slider-container') {
return {
tipo: deslizadorTipo,
contenido : '<div class="slider-left-part"><h2>Ejemplo de Título</h2><div class="slider-title">Lorem Ipsum</div><div class="slider-description">Sample Description</div><div class="slider-link"><a href=">Link</a></div></div><div class="slider-right-part"><img class="slider-image" src="https://via.placeholder.com/503x300"></div>',
activeOnRender: 1
};
}
}
}),
Definir la vista
view: defaultView
});
};`Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #460
Cuando la vista del componente modifica el HTML, los componentes de texto ya no son editables
Estoy intentando crear un componente personalizado que contenga algo de texto lorem ipsum en el contenido, para editarlo una vez que esté e...
Issue #978
Los hijos de los tipos de componentes personalizados no son editables, seleccionables ni resaltables
@artf estoy creando un componente personalizado de tipo Default y el código se ve así ! SAF Incluso yo arbitré el #260 e implementé como su...
Issue #1618
¿Los componentes hijos no se rastrean en los modelos?
Hola, estoy enfrentando un problema extraño y necesito vuestra ayuda. cuando muevo componentes dentro de bloques, en el modelo de vista los...
Issue #1838
¿Cómo obtener la última propiedad CSS de un componente?
¡Hola, gran trabajo con uvapesjs! Ya he leído la documentación (especialmente CssComposer) y también los temas relevantes, pero aun así, es...
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.