Código de ejemplo y problema de modelos y componentes
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.
Lee la respuesta completa abajo ↓Pregunta
@artf Perdón por crear otro problema, pero también he probado con el código de abajo, también he creado Codepen para ello.
y aún así solo devuelve div vacío a través de editor.getHtml(),
! captura
Veo que el HTML se actualiza en Canvas pero no en el modelo.
! captura
Además, updateSrc() y la función updateh2Content() tienen var linkModel = this.get("components").at(0); indefinido.
! captura
If ¿puedes no cerrar el problema y tratar de explicar o señalar un ejemplo correcto al que pueda consultar?
'//añadir componente personalizado
comps.addType("custom-comp1", {
Defina el modelo model: defaultModel.extend({ Extender propiedades predeterminadas defaults: Object.assign({}, defaultModel.prototype.defaults, { Droppable: falso, tipo: "custom-comp1", etiquetaNombre: "div", vacío: 0, src: "http://placehold.it/260x195", h2Contenido: "Muestra H2", atributos: { "data-gjs-type": "custom-comp1" }, rasgos: [{ Tipo: "texto", etiqueta: "Fuente de la imagen", Nombre: "SRC", Provisional: "Por ejemplo, https://www.google.com", cambioprop: 1
}, {
Tipo: "texto",
etiqueta: "H2 Content",
nombre: "h2Content",
marcador de posición: "Sample H2",
cambioprop: 1
}]
}),
inicialize(o) {
defaultModel.prototype.initialize.apply(esto, argumentos);
this.listenTo(this, "change:src", this.updateSrc);
this.listenTo(this, "change:h2Content", this.updateh2Content);
},
updateSrc() {
var linkModel = this.get("components").at(0);
var src = this.get("src");
if (linkModel) {
linkModel.href = src;
}
},
updateh2Content() {
var linkModel = this.get("components").at(0);
if (linkModel) {
var h2Model = linkModel.get("components").at(0);
var h2Content = this.get("h2Content");
if (h2Content) h2Model.content = h2Content;
}
},
updateAll() {
this.updateSrc();
this.updateh2Content();
}
}, {
isComponent(el) {
if (el.className === "custom-comp1") {
return {
Tipo: "Custom-Comp1"
};
}
}
}),
Definir la vista
view: defaultView.extend({
inicialize(o) {
defaultView.prototype.initialize.apply(esto, argumentos);
this.listenTo(this.model, "change:src", this.updateSrc);
this.listenTo(this.model, "change:h2Content", this.h2Content);
},
h2Content() {
$(this.el)
.find("h2")
.html(this.model.get("h2Content"));
},
updateSrc() {
$(this.el)
.find("a")
.attr("href", this.model.get("src"));
},
render(... args) {
this.updateAttributes();
this.updateClasses();
var tempPlantilla =
"<h2>" +
this.model.get("h2Content") +
"</h2><p>" +
this.model.get("h2Content") +
"</p>";
Plantilla var =
"<a onclick='event.preventDefault()' href=" + this.model.get("src") + ">" +
tempPlantilla +
"</a>";
this.el.className = "custom-comp1";
this.el.innerHTML = plantilla;
this.model.updateAll();
devuelvo esto;
}
})
});`Respuestas (1)
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 #1208
Crear panel minimalista barra lateral izquierda III
Hola @artf, gracias a ti por el comentario en el #1188, veo que en el código https://codepen.io/artf/full/MQpZPj/ usa la propiedad appendTo...
Issue #1494
[Pregunta] Clases de viento a cola
Estoy buscando usar Tailwind con GrapesJS, pero este framework utiliza Classes CSS Utility-First para crear layouts rápidos. El problema es...
Issue #417
Añadir el botón de Configuración a un componente personalizado.
Hola, ¿Cómo puedo crear una configuración o puedes editar, por ejemplo, un botón de edición para mi componente personalizado? Con la cuarta...
Issue #1715
Hola, soy nuevo en tu proyecto, pero me encanta. Tengo un pequeño problema con los atributos de la imagen.
He añadido dos rasgos nuevos al gestor de rasgos para imágenes. Anchura y altura. Lo añadí como plugin siguiendo tu ejemplo. Funciona perfe...
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.