editor.setComponents(html) reset to default traits values on editor
Question
#522 thanks for all help was able to resolve via this.model.attributes. but now I have another issue, where editor.setComponents reset value in editor of html retrived to default traits values.
Application flow
- User redirected to grapesjs editor to edit page content, where they can use different components
- On save editor.getHtml() saved to database and redirect user to page and new content will be retrived from db and displayed with selected component and values
- User can choose to edit same page and redirected to editor page
- On load page components retrieved from db and loaded on grapesjs editor for editing, set via editor.setComponents() so user can edit it
on step 4 it reset components valus to default traits values.

`function createPCBoxComp(comps, defaultModel, defaultView) {
comps.addType('pcBox', {
// Define the Model
model: defaultModel.extend({
// Extend default properties
defaults: Object.assign({}, defaultModel.prototype.defaults, {
droppable: false,
type: 'pcBox',
tagName:'div',
void: 0,
src: '/sites/testUniTest/Images1/Environment/level3/balloons_over_turkey.png',
hoverText: 'Link to curriculum page',
title: ' Curriculum Link',
a_href: 'https://team.global.test/sites/testUni',
target: '_blank',
attributes: {
frameborder: 0,
'data-gjs-type': 'pcBox',
},
traits: [{
type: 'text',
label: 'Hover Text',
name: 'hoverText',
placeholder: 'eg. Link to curriculum page',
changeProp: 1,
},
{
type: 'text',
label: 'Title(at bottom of image)',
name: 'title',
placeholder: 'eg. Curriculum Link',
changeProp: 1,
}, {
type: 'text',
label: 'Link to open',
name: 'a_href',
placeholder: 'eg. https://team.global.test/sites/testUni',
changeProp: 1,
}, {
type: 'select',
label: 'Target',
name: 'target',
options: [{
value: '_parent',
name: 'This Window'
},
{
value: '_blank',
name: 'New Window'
},
],
changeProp: 1,
},
{
type: 'text',
label: 'Image Source',
name: 'src',
placeholder: 'eg. 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',
changeProp: 1,
},
],
}),
init(){
},
initialize(o) {
defaultModel.prototype.initialize.apply(this, arguments);
this.attributes.attributes.className = "gjs-cust-pcBox pcBox";
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);
if (this.config.modal)
this.modal = this.config.modal;
if (this.config.am)
this.am = this.config.am;
},
updateAll(){
this.updateTitle();
this.updateHoverText();
this.updateLink();
this.updateTarget();
this.updateSrc();
this.attributes.className = "pcBox";
},
updateTitle() {
var linkModel = this.get("components").at(0);
if (linkModel) {
var h2Model = linkModel.get("components").at(1);
var title = this.get('title');
if (title)
h2Model.attributes.content = title;
}
},
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.attributes.content = hoverText;
}
},
updateLink() {
var linkModel = this.get("components").at(0);
if (linkModel) {
var a_href = this.get('a_href');
if (a_href)
linkModel.attributes.attributes.href = a_href;
}
},
updateTarget() {
var linkModel = this.get("components").at(0);
if (linkModel) {
var target = this.get('target');
if (target)
linkModel.attributes.attributes.target = target;
}
},
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');
if (src)
imageTagModel.attributes.src = src;
}
}
}, {
isComponent(el) {
if ((el.getAttribute &&
el.getAttribute('data-gjs-type') == 'pcBox') || el.className === 'gjs-cust-pcBox pcBox') {
return {
type: 'pcBox'
};
}
}
}),
// Define the View
view: defaultView.extend({
tagName: 'div',
events: {
'dblclick': 'openModal',
'click': 'openSettings',
},
openSettings(e) {
var openBlocksBtn = editor.Panels.getButton('views', 'open-blocks');
openBlocksBtn && openBlocksBtn.set('active', 0);
var openTMBtn = editor.Panels.getButton('views', 'open-tm');
openTMBtn && openTMBtn.set('active', 1);
},
initialize(o) {
defaultView.prototype.initialize.apply(this, arguments);
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("title"));
},
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.classEmpty);
else
$(this.el).find("img.img__img").removeClass(this.classEmpty);
},
openModal(e) {
var em = this.opts.config.em;
var editor = em ? em.get('Editor') : '';
if (editor) {
editor.runCommand('open-assets', {
target: this.model,
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("title") + "</h4>";
var template = "<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 = (template);
this.model.updateAll();
return this;
}
})
});
};
`Answers (2)
@krunal039 editor.getHtml() it's your FINAL output and obviously, there are no pieces of information about traits and other stuff. Store and use editor.getComponents() then, if you need the user to edit templates again.
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 #1092
[BUG]traits and storage trigger
Hey, maybe it's not bug, i'm not sure. I have traits with changeProp: true field. When I change the value of trait by UI, model is changed...
Issue #771
Image src is not updating
Hi @artf, I have updated the image src using below code: editor.getSelected().set('attributes', {'src': image_Url}); but when i set all the...
Issue #841
[QUESTION] Add default Trait (attribute) to model for all HTML Components (elements)
Hi, I've read the Traits, Components and API wikis, grepped all the open & closed issues. I've even found the code where you are creating t...
Issue #912
[BUG]: HTML attributes/traits not escaped
When double quotes are added to an attribute it breaks the HTML.https://jsfiddle.net/szLp8h4n/Drag in the link block.Click the link in the...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.