Add html, css and js to Block Manager
Hi @pouyamiralayi , thus, doing, content: '<div></div><style></style>' will seperate the HTML from CSS in the download code feature of GrapesJS? Note that in every blocks of code, there is different HTML, CSS and JS. Is the css of, example block1, will not affect the style of block2?
Read full answer below ↓Question
[QUESTION]
Hi! I'm retrieving dynamic html,css and js codes from the database. How can I create Blocks with this? Currently, this is my code,
editor.BlockManager.add($aBlock['name'], {
id: $aBlock['name'],
label: $aBlock['name'],
category: $aBlock['category'],
content: $aBlock['html'],
style: $aBlock['css'],
script: $aBlock['css'],
});
But its not working. Please help. Thank you.
Answers (3)
Hi @pouyamiralayi , thus, doing,
content: '<div></div><style></style>'
will seperate the HTML from CSS in the download code feature of GrapesJS?
Note that in every blocks of code, there is different HTML, CSS and JS. Is the css of, example block_1, will not affect the style of block_2?
@cristianumali22 your code looks fine and it is not executed before grapesjs initialization because you are passing the reference and not actually calling it! i suggest using the grapesjs cli because it is doing all the setups for you and providing you with a nice and clean environment. Cheers!
@cristianumali22 please consider putting both your `html and css inside the content` property like this: for including scripts, you must define a new component type and then proceed to component & js Cheers!
Related Questions and Answers
Continue research with similar issue discussions.
Issue #2177
How to create a block with HTML and CSS and javascript content.
Can somebody please show me a code example of how to create a block with javascript and css styles. The main problem is that the js code is...
Issue #1574
Question, Block content from file
Hi, this is not really an issue but more a question. I'm currently using custom blocks in my GrapesJS editor. This is how I create them : I...
Issue #2125
[QUESTION] How to have a dynamic properties in a custom block?
Hello, I am making a custom category using ChartJS which would be blocks of draggable charts. I currently have this code to have a static c...
Issue #3626
How to set src of video tag at dynamic?
Hi @artf , Hi I have drag and drop video tag and button from blockmanager, On Clicking the button , I need to change the url to src. But no...
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 →Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.