How to load dynamic CSS style(Not Link) into the Canvas head
Question
Hi, First of all thanks for your great Work !!!!! I am trying to load a dynamic style into the canvas head. Is there any way to load dynamic object or string into the canvas head. var customeCss = "h1 { color:#000000; font-family:Courier; font-style:italic;; }" var editor = grapesjs.init({ ............................................................ canvas: { scripts: [ "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"], styles: [customeCss] //Is there any way to do so. } ............................................................ }); I need your help. Thanks,
Answers (2)
Do this
const head = editor.Canvas.getDocument().head;
head.insertAdjacentHTML('beforeend', `<style>YOUR CSS</style>`)
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 #444
How to load css link into the head tag?
Hello, First of all, thanks for contributing such an amazing js framework. I am very new to grapesjs. And github too. https://github.com/ar...
Issue #1537
Duplicate component not style
Hi, First of all, thanks a lot for the awesome work ❤️ !!! I've a question about the duplication tool so here the steps to follow :I drag&d...
Issue #1318
Question: How to enable Event of mouse to increase value of input
hi @artf I want to know Is there any way to enable input mouse scroller in style manager as you can my screenshot. i want to initalize scro...
Issue #1789
[Question] How to append a plus icon in the column and element section?
Hi @artf . First of all, great work. I have been trying to use grapesjs for a month now. So, I stumbled upon a situation where I need to le...
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.