Allowing user to add a global stylesheet to canvas dynamically

[anushabivera]

Hi, I wanted to provide the user the option to load a custom stylesheet to the canvas. This is so that the user can apply the custom defined styles to the control as class instead of inline style and also to maintain uniformity among the various users using the grapesjs based editor tool to generate the html template. Does Grapesjs already support loading stylesheet dynamically? Any guidance with this issue will be of great help to me.

Thank you, Anusha

[RJCAM]

Hi @anushabivera if you want to load the stylesheets on init (local and with cdn) you can simply add the css/js links to the canvas property on editor init function, like this:

const editor = grapesjs.init({
    ...
    canvas: {
        styles: [
            'example-of-css-file.css',
            'another-css-goes-here'
        ],
        scripts: [
            'example-of-js-file.js',
            'another-js-goes-here'
        ]
    }
});

If you want to add them dynamically you can try this (example with materialize):

const head = editor.Canvas.getDocument().head;
head.insertAdjacentHTML('beforeend', `<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">`);
head.insertAdjacentHTML('beforeend', `<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">`);
head.insertAdjacentHTML('beforeend', `<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>`);

BTW: This question has already been asked, any doubts you can get more info below (mostly 66 and 1739):

66

195

444

473

966

1739

[anushabivera]

Thank you @RJCAM . My plan is to provide the functionality as an attribute of the canvas and the user can enter the url of the custom stylesheet as value of the attribute

[theSC0RP]

Hi @RJCAM. Thank you for this solution. If I want to remove the dynamically added styles and scripts, how can I do that?

[RJCAM]

@theSC0RP in my case I made a head edit function. So now I'm able not just to add external content but also add/edit meta tags and other tags inside the head. I made it similar to the edit html function (if you search you see the code) the only difference is this when I click to save and edit in the modal:

const gjs_head = editor.Canvas.getDocument().head;

btnEditHEAD.onclick = function() {

    let header = codeViewerHEAD.editor.getValue();
    gjs_head.innerHTML = header;

    head = header; // SAVING LAST CHANGES IN GLOBAL VARIABLE

    modal.close();
};

[theSC0RP]

@RJCAM Thanks for the suggestion. I am uploading a css file asset and then I want to add it to the template and remove it whenever I want (Using a checkbox) When the checkbox is ticked the file should be added to the template and when unchecked it should be removed.

[theSC0RP]

I got it! I removed it by using an id on the link tag.

[GoodPHP]

Hi, we have done global header plugin - https://gjs.market/products/super-header-for-grapesjs