Problema con el modelo y el retorno HTML
@krunal039 esto no es un formulario de apoyo. Si tienes algún problema, preguntar aquí solo va a enfurecer a los colaboradores. Si tienes un problema, pregunta en Stack Overflow, para eso es...
Lee la respuesta completa abajo ↓Pregunta
#522
@artf lo intenté como dijiste, pero sin suerte, no quiero hacerte perder el tiempo, pero sería muy útil si por favor puedes crear una pequeña muestra o indicarme una muestra, seguro que me estoy perdiendo algo. Perdón, tenía que abrir otro número, pero es una continuación del mismo #522,
aquí solo editor.html() devuelve el valor por defecto cuando no se devuelve ningún cambio en el rasgo de componente.
Puedo ver valores actualizados en Canvas pero cuando obtengo html a través de editor.html() da valores por defecto pero no se actualiza por trait.
'function createPCBoxComp(comps, defaultModel, defaultView) {
comps.addType('pcBox', {
Defina el modelo
model: defaultModel.extend({
Extender propiedades predeterminadas
defaults: Object.assign({}, defaultModel.prototype.defaults, {
Droppable: falso,
tipo: 'pcBox',
etiquetaNombre: 'div',
vacío: 0,
src: '/sites/testUniTest/Images1/Environment/level3/balloons_over_turkey.png',
hoverText: 'Enlace a la página del currículo',
título: 'Enlace curricular',
a_href: 'https://team.global.test/sites/testUni',
Objetivo: '_blank',
atributos: {
marco borde: 0,
'data-gjs-type': 'pcBox',
},
rasgos: [{
Tipo: 'texto',
etiqueta: 'Texto de Crucero',
nombre: 'hoverText',
Provisional: 'por ejemplo. Enlace a la página del currículo',
cambioProp: 1,
},
{
Tipo: 'texto',
etiqueta: 'Título(al final de la imagen)',
Nombre: 'Título',
Provisional: 'por ejemplo. Enlace curricular',
cambioProp: 1,
}, {
Tipo: 'texto',
etiqueta: 'Enlace para abrir',
Nombre: 'a_href',
Provisional: 'por ejemplo. https://team.global.test/sites/testUni',
cambioProp: 1,
}, {
tipo: 'select',
etiqueta: 'Target',
Nombre: 'Objetivo',
Opciones: [{
valor: '_parent',
nombre: 'This Window'
},
{
valor: '_blank',
nombre: 'New Window'
},
],
cambioProp: 1,
},
{
Tipo: 'texto',
etiqueta: 'Fuente de la imagen',
Nombre: 'SRC',
Provisional: 'por ejemplo. https://team.global.test/sites/LearningDevLib/test%20portal%20deliverables%20%20approved/2.%20Business%20and%20Role%20Specific/7.test%20technology/Assets_pics_graphics/t3.1_test_engineering/test_tools_training.jpg',
cambioProp: 1,
},
],
}),
init(){
},
inicialize(o) {
defaultModel.prototype.initialize.apply(esto, argumentos);
this.listenTo(this, 'change:target', this.updateTarget);
this.listenTo(this, 'change:title', this.updateTitle);
this.listenTo(this, 'change:hoverText', this.updateHoverText);
this.listenTo(this, 'change:a_href', this.updateLink);
this.listenTo(this, 'active', this.openModal);
this.listenTo(this, 'dblclick active', this.openModal);
this.listenTo(this, 'change:src', this.updateSrc);
this.classEmpty = this.ppfx + 'plh-pc-box';
if (this.config.modal)
this.modal = this.config.modal;
if (this.config.am)
this.am = this.config.am;
this.class = this.class && this.class.indexOf("pcBox") > -1? this.class : this.class+ " pcBox";
},
updateAll(){
this.updateTitle();
this.updateHoverText();
this.updateLink();
this.updateTarget();
this.updateSrc();
},
updateTitle() {
var linkModel = this.get("components").at(0);
if (linkModel) {
var h2Model = linkModel.get("components").at(1);
título var = this.get('título');
if (título)
h2Model.content = título;
}
},
updateHoverText() {
var linkModel = this.get("components").at(0);
if (linkModel) {
var imageModel = linkModel.get("components").at(0);
var hoverTextModel = imageModel.get("components").at(1);
var hoverText = this.get('hoverText');
if (hoverText)
hoverTextModel.content = hoverText;
}
},
updateLink() {
var linkModel = this.get("components").at(0);
if (linkModel) {
var a_href = this.get('a_href');
si (a_href)
linkModel.href = a_href;
}
},
updateTarget() {
var linkModel = this.get("components").at(0);
if (linkModel) {
var objetivo = this.get('target');
si (objetivo)
linkModel.target = objetivo;
}
},
updateSrc() {
var linkModel = this.get("components").at(0);
if (linkModel) {
var imageModel = linkModel.get("components").at(0);
var imageTagModel = imageModel.get("components").at(0);
var src = this.get('src');
si (src)
imageTagModel.src = src;
}
}
}, {
isComponent(el) {
si ((el.getAttribute & &
el.getAttribute('data-gjs-type') == 'pcBox') || el.className === 'gjs-cust-pcBox pcBox') {
return {
tipo: 'pcBox'
};
}
}
}),
Definir la vista
view: defaultView.extend({
etiquetaNombre: 'div',
eventos: {
'dblclick': 'openModal',
'click': 'openSettings',
},
openSettings(e) {
var openBlocksBtn = editor. Panels.getButton ('vistas', 'bloques abiertos');
openBlocksBtn & & openBlocksBtn.set('active', 0);
var openTMBtn = editor. Panels.getButton ('vistas', 'open-tm');
openTMBtn & & openTMBtn.set('active', 1);
},
inicialize(o) {
defaultView.prototype.initialize.apply(esto, argumentos);
this.listenTo(this.model, 'change:target', this.updateTarget);
this.listenTo(this.model, 'change:title', this.updateTitle);
this.listenTo(this.model, 'change:hoverText', this.updateHoverText);
this.listenTo(this.model, 'change:a_href', this.updateLink);
this.listenTo(this.model, 'active', this.openModal);
this.listenTo(this.model, 'dblclick active', this.openModal);
this.listenTo(this.model, 'change:src', this.updateSrc);
this.classEmpty = this.ppfx + 'plh-pc-box';
if (this.config.modal)
this.modal = this.config.modal;
if (this.config.am)
this.am = this.config.am;
},
updateTitle() {
$(this.el).find('h4').html(this.model.get("título"));
},
updateHoverText() {
$(this.el).find('p.img__description').html(this.model.get("hoverText"));
},
updateLink() {
$(this.el).find('a').attr('href', this.model.get("a_href"));
},
updateTarget() {
$(this.el).find('a').attr('target', this.model.get("target"));
},
updateSrc() {
var src = this.model.get("src");
$(this.el).find("img.img__img").attr('src', src);
if (!src)
$(this.el).find("img.img__img").addClass(this.classVacty);
si no,
$(this.el).find("img.img__img").removeClass(this.classVacty);
},
openModal(e) {
var em = this.opts.config.em;
var editor = em ? em.get('Editor'): '';
si (editor) {
editor.runCommand('open-assets', {
Objetivo: esto.modelo,
onSelect() {
editor. Modal.close();
editor. AssetManager.setTarget(null);
}
});
}
this.$el.click();
},
disableClick() {
this.preventDefault();
},
render(... args) {
this.updateClasses();
this.updateAttributes();
var tempTemplate = "<div class=img__wrap><img class=img__img src=" + this.model.get("src") + "><p class=img__description>" + this.model.get("hoverText") + "</div><h4>" + this.model.get("título") + "</h4>";
var plantilla = "<a href=" + this.model.get("a_href") + " target=" + this.model.get("target") + " onclick='event.preventDefault()'>" + tempTemplate + "</a>"
this.el.className = "gjs-cust-pcBox pcBox";
this.el.setAttribute("data-gjs-type", "pcBox");
this.el.innerHTML = (plantilla);
this.model.updateAll();
devuelvo esto;
}
})
});
};`Respuestas (2)
@krunal039 esto no es un formulario de apoyo. Si tienes algún problema, preguntar aquí solo va a enfurecer a los colaboradores. Si tienes un problema, pregunta en Stack Overflow, para eso es...
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 #426
Subida de imagen después de mostrarse inmediatamente en el administrador de activos
@ artf He intentado lo mejor que pude, pero sigue sin funcionar ¿Puedes ayudarme con esto, por favor? Una vez que subo una imagen no quiero...
Issue #1253
grapesjs IE 11 No muestra la página web
Hola Uso grapesjs para crear una página web, funciona perfectamente con el navegador Chrome pero no muestra la página de grepesjs en IE 11...
Issue #1748
Cómo evitar que los elementos arrastren dentro del editor
Hola @artf Lo estás haciendo muy bien con grapesjs y es extremadamente útil hacer que nuestra funcionalidad sea más fácil de usar. Gracias...
Issue #1780
Cómo cambiar el desplegable extra para el rasgo de cambio de enlace
Hola @artf, Quiero dar una funcionalidad más al usuario, como que el usuario pueda cambiar cualquier enlace con el desplegable de enlaces p...
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.