No se puede actualizar el valor de los traits en el HTML para un componente personalizado
Por favor, lleva un registro de tus problemas aquí, estás hablando del mismo caso #1089
Lee la respuesta completa abajo ↓Pregunta
He creado un componente personalizado para los iconos sociales. Cuando selecciono este componente tengo dos rasgos: configurar la URL de Facebook y mostrar Facebook; al actualizar ambos se actualizan y se reflejan en Canvas, pero cuando exporto no obtengo la URL de Facebook, que se establece mediante los rasgos. A continuación se muestra el código adjunto.
grapesjs.plugins.add('social-icons-component', (editor, opts = {}) => {
Sea c = opts;
Sea defaults = { bloques: 'iconos sociales',
Estilo por defecto defaultStyle: cierto,
Hora de inicio por defecto, por ejemplo, '2018-01-25 00:00' Hora de inicio: '',
Estilo por defecto defaultStyle: cierto,
Hora de inicio por defecto, por ejemplo, '2018-01-25 00:00' Hora de inicio: '',
Mensaje de texto para mostrar cuándo termina la cuenta atrás finTexto: 'CADUCADO',
Tipo de entrada de fecha, por ejemplo, 'fecha', 'cita-hora-local' dataTipoEntrada: 'fecha',
Prefijo de clase de cuenta atrás socialClssfx: 'iconos sociales',
Etiqueta de cuenta atrás etiquetaCuenta atrás: 'Cuenta atrás',
Etiqueta de categoría de cuenta atrás etiquetaCuenta atrásCategoría: 'Extra',
Días de texto de etiqueta usado en el componente labelDays: 'días',
Horas etiquetan el texto utilizado en el componente etiquetaHoras: 'horas',
Texto de etiqueta de actas utilizado en el componente
labelMinutes: 'minutos',
Los segundos etiquetan el texto usado en el componente
labelSeconds: 'segundos',
};
Valores predeterminados de carga
para (dejemos nombre en los valores predeterminados) {
si (!( nombre en c))
c[name] = defaults[name];
}
Añadir componentes
loadComponents (editor, c);
// Añadir componentes
loadBlocks(editor, c);
const domc = editor. DomComponents;
const defaultType = domc.getType('default');
const textType = domc.getType('text');
const defaultModel = defaultType.model;
const defaultView = defaultType.view;
const textModel = textType.model;
const textView = textType.view;
const sfx = c.socialClssfx;
domc.addType('social-icons', {
model: defaultModel.extend({
defaults: Object.assign({}, defaultModel.prototype.defaults, {
Droppable: falso,
rasgos: [{
etiqueta: 'Facebook URL',
Nombre: "facebook_url",
cambioProp: 1,
valor:"dasdsdasd",
},
{
Tipo: "casilla de verificación",
etiqueta: 'Facebook',
Nombre: "facebook_show",
cambioProp: 1,
valor: 1,
},
],
script: function() {
}
}),
}, {
isComponent(el) {
if(el.getAttribute &&
el.getAttribute('data-gjs-type') == 'social-icons') {
return {
Tipo: 'Iconos sociales'
};
}
},
}),
view: defaultView.extend({
init: function() {
this.listenTo(this.model, 'change:facebook_url change:facebook_show', this.updateSrc);
const comps = this.model.get('components');
Añade una plantilla básica de cuenta atrás si aún no está inicializada
if (!comps.length) {
comps.reset();
comps.add('
<div data-js="social-icons" >
<div data-js="social-facebook-div" class="${sfx}-block">
<a data-js="social-facebook" href="" target="_blank" style="border: none;text-decoration: none;"class="facebook">
<img src="https://www.ctltrax.com/staging/frontend/assets/files/ext-mbuilder-email-editor/assets/social/facebook.png" borde="0"><!---->
</a>
</div>
<div class="${sfx}-block">
<a data-js="social-twitter" href="" target="_blank" style="border: none;text-decoration: none;"class="twitter">
<img src="https://www.ctltrax.com/staging/frontend/assets/files/ext-mbuilder-email-editor/assets/social/twitter.png" borde="0"><!---->
</a>
</div>
<div class="${sfx}-block">
<a data-js="social-linkedin" href="" target="_blank" style="border: none;text-decoration: none;"class="linkedin">
<img src="https://www.ctltrax.com/staging/frontend/assets/files/ext-mbuilder-email-editor/assets/social/linkedin.png" borde="0"><!---->
</a>
</div>
<div class="${sfx}-block">
<a data-js="social-youtube" href="" target="_blank" style="border: none;text-decoration: none;"class="youtube">
<img src="https://www.ctltrax.com/staging/frontend/assets/files/ext-mbuilder-email-editor/assets/social/youtube.png" borde="0"><!---->
</a>
</div>
</div>
`);
}
},
updateSrc: función updateSrc() {
var facebookUrl = this.model.querySelector('[data-js=social-facebook]');
// var facebookDiv = this.model.querySelector('[data-js=social-facebook-div]');
var facebookUrl = this.el.querySelector('[data-js=social-facebook]');
var facebookDiv = this.el.querySelector('[data-js=social-facebook-div]');
console.log(este);
var facebook_url = this.model.get('facebook_url');
var facebook_check = this.model.get('facebook_show');
if(facebook_check){
facebookDiv.style.display = '';
facebookUrl.href = facebook_url;
}else{
facebookDiv.style.display = 'ninguno';
facebookUrl.href = facebook_url;
}
},
}),
});
estilo const = c.defaultStyle ? '<style>
.${sfx} {
text-align: center;
familia tipográfica: Helvetica, serif;
}
.${sfx}-block {
pantalla: bloque en línea;
Margen: 0 10px;
relleno: 10px;
}
.${sfx}-digit {
tamaño de fuente: 5rem;
}
.${sfx}-endtext {
tamaño de fuente: 5rem;
}
.${sfx}-cont,
.${sfx}-block {
pantalla: bloque en línea;
}
' :</style> '';
var bm = editor. Jefe de bloque;
bm.add('social-icons', {
etiqueta: 'Cita de prueba',
categoría: 'Extra',
Contenido: {
Contenido: '
${estilo}
`,
Editable: !1,
Droppable: !0,
'tipo':'iconos sociales',
estilo: {
"ancho" : "100%",
"text-align": "center",
}
},
atributos: {clase:'fa fa-quote-right'}
});
});Respuestas (2)
Por favor, lleva un registro de tus problemas aquí, estás hablando del mismo caso #1089
Este hilo se ha bloqueado automáticamente porque no ha habido actividad reciente desde que se cerró. Por favor, abre un nuevo problema para bugs relacionados.
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #1313
[Pregunta] Valor de rasgos de establecer desde html en carga de componentes
Tengo un componente personalizado y quiero establecer valores predeterminados de rasgos desde html. A continuación se muestra HTML renderiz...
Issue #1696
Los rasgos aparecen a la primera vez cuando arrastras un componente personalizado
Hola artf, he creado un componente personalizado y le he añadido rasgos; al arrastrar este componente al editor y seleccionarlo, los rasgos...
Issue #1665
Selector de JQUERY en rasgos Acciones
He creado un componente personalizado y selecciono según sus características, esta selección contiene múltiples URLs. En el método doStuff(...
Issue #990
¿Cómo escuchar un evento para actualizar el estilo de un componente personalizado?
@artf @arthuralmeidap @nojacko Tengo un componente personalizado como este y el código se ve como https://jsfiddle.net/nganand/n97g7g43/. !...
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.