Model and Component sample code and issue
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Read full answer below ↓Question
@artf Sorry for creating another issue but I tried below code also I have created codepen for same.
and still it only return empty div via editor.getHtml(),
I can see html updated in canvas but not on model.
Also updateSrc() and updateh2Content() function has var linkModel = this.get("components").at(0); undefined.
If you can please do not close issue and try to explain or point to correct sample where I can refer to?
`//add custom component
comps.addType("custom-comp1", {
// Define the Model
model: defaultModel.extend({
// Extend default properties
defaults: Object.assign({}, defaultModel.prototype.defaults, {
droppable: false,
type: "custom-comp1",
tagName: "div",
void: 0,
src: "http://placehold.it/260x195",
h2Content: "Sample H2",
attributes: {
"data-gjs-type": "custom-comp1"
},
traits: [{
type: "text",
label: "Image Source",
name: "src",
placeholder: "eg. https://www.google.com",
changeProp: 1
}, {
type: "text",
label: "H2 Content",
name: "h2Content",
placeholder: "Sample H2",
changeProp: 1
}]
}),
initialize(o) {
defaultModel.prototype.initialize.apply(this, arguments);
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 {
type: "custom-comp1"
};
}
}
}),
// Define the View
view: defaultView.extend({
initialize(o) {
defaultView.prototype.initialize.apply(this, arguments);
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 tempTemplate =
"<h2>" +
this.model.get("h2Content") +
"</h2><p>" +
this.model.get("h2Content") +
"</p>";
var template =
"<a onclick='event.preventDefault()' href=" +
this.model.get("src") +
">" +
tempTemplate +
"</a>";
this.el.className = "custom-comp1";
this.el.innerHTML = template;
this.model.updateAll();
return this;
}
})
});`Answers (1)
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #513
Model and returned html issue
I have below code to create custom component and wants to retrieve updated html via editor.html() but return wrong html, I am sure I am mis...
Issue #527
Model and HTML return issue
#522 @artf I tried as you said but still no luck, I do not want to waste your time but it would be very useful if you can please create sma...
Issue #459
Error when including a custom component inside another block
Sorry for the vague title. I'm not sure how to describe this concisely. I have a custom block where i want to restrict that only images can...
Issue #1208
Create minimalist Panel left sidebar III
hello @artf , thanks to you for the comment on #1188, i see in the code https://codepen.io/artf/full/MQpZPj/ uses the appendTo property to...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Related tutorials
In-depth guides on the same topic.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.