How to reload block content based on trait value change
The script content part has NOTHING to do with the editor components... read carefully Components & JS
Read full answer below ↓Question
I have added new block with some trait value and i want to pass that trait value with ajax call.
Also should be able to reload block when trait value changes. Is that possible? I am pasting my block code.
editor.BlockManager.add('loginBlock', {
label: 'Login Block',
attributes: {
class:'fa fa-sign-in',
title: 'My title',
my_field: 'My title'
},
content: {
traits: [{
type: 'text',
label: 'Test',
name: 'model-prop-name',
changeProp: 1
}],
myModelPropName: 'login',
script: "" +
"myVar3 = this;" +
"var xhttp = new XMLHttpRequest();" +
"xhttp.onreadystatechange = function() {" +
"if (this.readyState == 4 && this.status == 200) {" +
"myVar3.innerHTML = this.responseText;" +
"}" +
"};" +
"xhttp.open('GET', '/?index=apiv2', true);" +
"xhttp.send();"
}
});Answers (2)
The script content part has NOTHING to do with the editor components... read carefully Components & JS
try use components methods, for example: editor.getSelected().components(your content)
Related Questions and Answers
Continue research with similar issue discussions.
Issue #3019
[QUESTION] - Bind inner text/html (like div, p, h1) to Trait
Hi! I've created a custom trait, and I want to be allowed to change the content of the tags (in this case it's a H1 tag) based on the trait...
Issue #2640
Adding extra attributes with Stylemanager to change selected block's attribute
Thanks for this awesome plugin. I am integrating it with my current project. Have one issue with it. Here is my code, I have added a new se...
Issue #1733
How to remove script tag which is added by add block manager script
Hello @artf I want to export final/production based html content excluding the script(Only which is added by block manager). Suppose i am a...
Issue #1121
[BUG] - <Tbody> inside <Table>
Hi @artf , I created a new component with tagName = 'table'. When selected and one option of its toolbar I also created is clicked, a new m...
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.
Tutorial
How to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services
A complete walkthrough of building a production GrapesJS editor: how to choose a preset, pick plugins, and scope setup services without burning a sprint.
Tutorial
Embed GrapesJS in Your SaaS: A Weekend Guide
Embed GrapesJS in your SaaS and ship a white-label page builder over a weekend. Honest tradeoffs, real code, and the plugins that close the UX gap.
Tutorial
Big Updates: TinyMCE 8 and Placeholder 2.0 for GrapesJS
In May we shipped major updates to two of our most popular GrapesJS plugins — TinyMCE Inline Text Editor and Placeholder.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.