Jodit dialog system

The Jodit dialog system allows you to create modals with title, footer, and content. Each dialog is created as a separate inheritor component [[View]].

Several basic wrappers are available out of the box to quickly create basic windows: [[Alert]]/[[Confirm]]/[[Prompt]]

Jodit.Alert('Hello world!', () => {
// After OK
});
Jodit.Confirm('Are you sure?', 'Confirm Dialog', yes => {
if (yes) {
// do something
}
});
Jodit.Prompt('Enter your name', 'Prompt Dialog', name => {
if (name.length < 3) {
Jodit.Alert('The name must be at least 3 letters');
return false;
}
// do something
});

Each of these wrappers returns an [[IDialog]] object, and you can expand the open window.

const dialog = Jodit.Alert('Hello world!', () => {
// After OK
});
dialog.setContent('Buy buy world! =)');

Note that you do not need to call the [[Dialog.open]] method.

For a simpler setup, you can immediately create an instance [[Dialog]] and already fully manage its contents:

const dialog = new Jodit.modules.Dialog();
dialog.setHeader('The header!');
dialog.setContent('Content');
dialog.setFooter([
new Jodit.modules.UIButton(dialog).onAction(() => {
dialog.close();
})
]);
dialog.open();

In all of these examples, the dialog opens regardless of Jodit's settings, specifically the selected language and theme. To make the dialog open in the same theme as the editor, you can set the theme in its settings, or you can use the [[IDlg]] trait.

const dialog = new Jodit.modules.Dialog({
theme: 'dark'
});

// or

const editor = new Jodit('#editor', {
theme: 'dark'
});
const dialog = editor.dlg();
editor.alert('Hello world!');
editor.confirm('Hello world?', yes => {
console.log('Ok?', yes);
});

References

Classes

Functions

References

Re-exports Alert
Re-exports Confirm
Re-exports Dialog
Re-exports Prompt

Jodit PRO

If you like Jodit - try Jodit PRO