docs/api/modal_dialog.md
You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object
const editor = grapesjs.init({
modal: {
// options
}
})
Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
const modal = editor.Modal;
modal:open Modal is openededitor.on('modal:open', () => { ... });
modal:close Modal is closededitor.on('modal:close', () => { ... });
modal Event triggered on any change related to the modal. An object containing all the available data about the triggered event is passed as an argument to the callback.editor.on('modal', ({ open, title, content, ... }) => { ... });
Open the modal window
opts Object Options (optional, default {})
opts.title (String | HTMLElement)? Title to set for the modalopts.content (String | HTMLElement)? Content to set for the modalopts.attributes Object? Updates the modal wrapper with custom attributesmodal.open({
title: 'My title',
content: 'My content',
attributes: { class: 'my-class' },
});
Returns this
Close the modal window
modal.close();
Returns this
Execute callback when the modal will be closed. The callback will be called one only time
clb Function Callback to callmodal.onceClose(() => {
console.log('The modal is closed');
});
Returns this
Execute callback when the modal will be opened. The callback will be called one only time
clb Function Callback to callmodal.onceOpen(() => {
console.log('The modal is opened');
});
Returns this
Checks if the modal window is open
modal.isOpen(); // true | false
Returns Boolean
Set the title to the modal window
title (string | HTMLElement) Title// pass a string
modal.setTitle('Some title');
// or an HTMLElement
const el = document.createElement('div');
el.innerText = 'New title';
modal.setTitle(el);
Returns this
Returns the title of the modal window
modal.getTitle();
Returns (string | HTMLElement)
Set the content of the modal window
content (string | HTMLElement) Content// pass a string
modal.setContent('Some content');
// or an HTMLElement
const el = document.createElement('div');
el.innerText = 'New content';
modal.setContent(el);
Returns this
Get the content of the modal window
modal.getContent();
Returns (string | HTMLElement)