[Question] Is it possible to perform dom manipulation through the block's contents script?
Question
Hey! First of all thank you so much to build such a great and versatile tool. Is it possible that I can manipulate the dom elements of the block through block's content script?
Eg.
editor.BlockManager.add('open-question-2', {
id: 'open-question-2',
label: `Open ended question 2`,
category: 'Forms',
attributes: {class:'fa fa-question-circle '},
droppable: 'form',
content:{
content : `
<div data-id="question-container">
<label>Question</label>
<input type="textbox" class="form-control">
</div>
`,
script : function(){
$("div[data-id='question-container']").find("input").attr("value", "Enter you question here...")
}
}
});
Basically I need a survey kinda block, where user can drop question block and then can enter the question string.
Once again thank you so much.
Answers (3)
Sure, but be sure to understand correctly the context of script and how it works
https://grapesjs.com/docs/modules/Components-js.html#components-js
You can't use $ if you didn't include it first
@artf
I've added the jquery, in the above image I've added the value attribute to input tag as we can see that in the above image, but that value attribute is not there in the final HTML I'm getting from the editor.
editor.StorageManager.add('local', {
// New logic for the local storage
load() {
// ...
},
store(data, clb, clbErr) {
// ...
console.log(data['gjs-html']) //<<<< In this html I'm not getting the **value** tag that I've added thru jquery dom manipulation.
},
});
Use the latest version please
Related Questions and Answers
Continue research with similar issue discussions.
Issue #739
Get the model of the clonned element
First of all thanks for such a great tool. I am giving a random id to the element when user drags a block in the editor. But when someone c...
Issue #792
Script property using function don't work with blocks
In Components & JS docs there's this example: This works perfectly. But I couldn't use a function instead of a string in script, as is said...
Issue #1584
Not getting the Script of Block from editor.getComponents()
Below is the Component that I'm adding. this.editor.BlockManager.add('dob-mmyy-pii', { id: 'dob-mmyy', label: DOB (MM, YYYY) (PII), categor...
Issue #428
Change the background of the body
Hello, First of all, I want to thank you for this amazing project! I have few a questions regarding the editor, and more precisely the news...
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.