How to trigger the 'Import Template (modal)' on page load
Question
Hello, Please i'm in need of the logic on how to the import template modal on initialization of the page... I'm using the newsletter preset plugin
What i'm trying to achieve?: Make the user upload their code once the page has been loaded.
Below are the logics I've tried,
`
editor.on('load',(model, argument )=> {
//open modAL
const modal = edit.Modal;
const cmdd = edit.Commands;
//filter using component name
if (model.getName() === 'Import template') { //not working
//show modal
modal.open();
}
edit.on('modal:', (a, b, c) => { //not working
console.log({ a });
console.log({ b });
console.log({ c });
});
cmdd.run('modal:import-template', (a, b, c) => { //not working
console.log({ a });
console.log({ b });
console.log({ c });
});
}`
_Originally posted by @boomshakar in https://github.com/artf/grapesjs/discussions/4272_Answers (3)
@boomshakar please don't convert discussions to issues
Noted. Thanks
Hi @artf,
I was able to get what I want by triggering click() on the button itself,
`
const modal = edit.Modal;
const query = new URLSearchParams(location.search);
const uploadQuery = query.get('key');
if (uploadQuery === 'upload-code') {
const importClick = document.querySelector('.gjs-pn-btn.fa.fa-download');
importClick.click();
edit.on('modal', (e) => {
if (e.open && e.title.textContent === 'Import template') {
modal.setTitle('<div>Import your Template [inline-html/css]</div>');
}
});
}
`
If there's a better workaround, i'd be glad If you share with me the knowledge.
Thanks.@boomshakar please don't convert discussions to issues
Related Questions and Answers
Continue research with similar issue discussions.
Issue #426
After image Upload immediately show in the asset Manager
@ artf I tried my best, but still it doesn't seem to work Can you please help me in this. Once I upload a image I don't want to refresh the...
Issue #2963
Template loaded via remote storage is not displayed in the editor
Hi, I am trying to load a default template from remote storage into the editor but nothing is displayed. As part of of the initialization I...
Issue #1745
[Feature]: Allow to import HTML documents
Hi Team, We are using grapesjs newsletter plugin in our project for importing and preview the template. We are facing some difficulty in re...
Issue #2262
blocked by cors policy No 'Access-Control-Allow-Origin' header is present on the requested resource
hello i'm using grapesjs with vue wrapper i'm unable to load a webpage using urlLoad: of grapesjs im facing cors issue,i'm pretty new to gr...
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.